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的設置纔會生效，同時須要指定參照物。