position:absolute 的定位是相对body或父元素
2018-10-05 本文已影响0人
K_Olivia
position:absolute 是相对于它所有父元素中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body.
- 例如：
abDiv 外层的div没有定义position,所以abDiv是相对body定位的
<body>
<div>
<div id="abDiv" style="width:100px; height:100px; position:absolut;left:20px;top:10px;">
</div>
</div>
</body>
- 例如
由于parent1Div没有定义position,parent2Div定义了position,所以abDiv相对于parent2Div 定位
<body>
<div id="parent2Div" style="width:200px;height:200px;background-color:red;position:absolute;">
<div id="parent1Div" style="width:100px;height:100px;background-color:blue;">
<div id="abDiv" style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
</div>
</div>
</body>
- 例如
abDiv相对parent1Div定位
<body>
<div id="parent2Div" style="width:200px;height:200px;background-color:red;position:absolute;">
<div id="parent1Div" style="width:100px;height:100px;background-color:blue;position:relative;">
<div id="abDiv" style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
</div>
</div>
</body>
