css定位position

定位：
position:取值relative,absolute,fixed,static(默认) ，及css3新增center | page | sticky
举个例子：
<div id="div0">
<div id="position">水平垂直居中的对象</div>
</div>
这里有两个嵌套的div，如果父级div没有设置position属性：relative或者absolute的话，子元素将以body为参照物，按照top,left设置的值来偏移。如设置：top:50%;left:50%;这时，div id=position就会在屏幕的中央（准确的说是左上角在屏幕中间位置）
但是如果设置了父级div的position属性，这时子元素的参照物就是父级元素了。

当父级不设置position属性时，这两个div在屏幕上的显示效果如下：

 

当设置了该父元素的position属性后：

position:absolute;/*只有设置了该属性，子元素才会以它做参照物进行偏移，否则以body*/
top:50%;
left:50%;

效果如下：

总结：当设置了position属性时，这时，left，top的设置才会生效，同时需要指定参照物。

 

转载于:https://www.cnblogs.com/kailing-con/p/5096992.html