position:absolute相对哪个元素定位

2024-01-04 02:54| 来源: 网络整理| 查看: 265

应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

w3school说：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

也就是说

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素默认的定位值是static，所以往上找参照元素一直到根元素了。如果是要相对第一个父元素定位，请为该父元素添加属性position: relative，或者添加position:absolute

示例代码：

*{margin:0;border:0;padding:0;} .head-photo { margin-top:100px; margin-left:100px; width:100px; height:120px; border:5px solid green; text-align:center; position:relative; } .head-photo div { position:absolute; top:15px; left:15px; display:block; z-index:10; border:2px solid red; width:50px; height:70px; } 或者设置.head-photo的position为absolute *{margin:0;border:0;padding:0;} .head-photo { margin-top:100px; margin-left:100px; width:100px; height:120px; border:5px solid green; text-align:center; position:absolute; } .head-photo div { position:absolute; top:15px; left:15px; display:block; z-index:10; border:2px solid red; width:50px; height:70px; }

结果都是：

【本文地址】

公司简介

联系我们