定位position详解:relative与absolute

一,position:relative相对定位

1,不会改变行内元素的display属性

3,并没有脱离普通流,只是视觉上发生的偏移。

html元素:

<div class="box">
    <div class="box2"></div>
</div>

css清单:

.box{
            width:100px;
            height:200px;
            padding:20px;
            border:10px solid green;
            background-color: #F7B824;
            position:relative;
        }
        .box2{
            height:20px;
            width:200px;
            background-color: #1E9FFF;
            position:absolute;
        }

.box2是.box的子元素

当.box2还没有设置相对位置的时候:表现形式如下:

并不是我认为的紧贴父元素的左上侧:而是除去了padding值--20px。效果跟{position:absolute,top:20px;left:20px}相同

当我为.box2设置偏移量的时候--top:0,left:0;才是我预想的紧贴父元素左上侧的效果。

css清单:

 .box{
            width:100px;
            height:200px;
            padding:20px;
            border:10px solid green;
            background-color: #F7B824;
            position:relative;
        }
        .box2{
            height:20px;
            width:200px;
            background-color: #1E9FFF;
            position:absolute;
            top:0;
            left:0;
        }

猜你喜欢

转载自www.cnblogs.com/qianxunpu/p/8945089.html