1，为什么给absolute设置height：100%有作用，给relative设置的话就不会起作用？
2，absolute和relative对子类带有float的元素会有差异？
如果把p1换成relative就不会包裹p3，不知是为什么？
4
760
<p class="p1">
<p class="p2">
<p class="p3"></p>
<p class="p4"></p>
</p>
</p>
.p1{
border:3px solid red;
position:absolute;
}
.p2{
background:yellow;
width:200px;
}
.p3{
float:left;
width:50px;
height:300px;
background:orange;
}
.p4{
width:100px;
height:100px;
background:blue;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
定位参照元素的问题。
absolute元素的定位参照元素为其父辈元素中第一个非static定位的元素，若其父辈元素均为static定位，则其定位参照元素为初始包含块，这里可以理解为 html 元素。设置
height:100%中100%是相对定位参照元素来说，因此为relative的元素设置100%不会产生效果，因为其相对body定位，而body的默认高度为0。而为absolute的元素设置100%产生效果是因为初始包含块的高度为 viewport 的高度。这里如果将 body 设置
position: relative，则absolute和relative元素将具有相同的 height 表现BFC 问题。
由于
position:abolute会使当前块级元素称为一个 BFC 容器（通常称为触发 BFC），而包裹所有浮动元素是 BFC 容器的特性，position:abolute的元素可以包裹浮动元素而position:relative的元素不可以。有关 BFC 的详细内容可以参考我的博文：http://zjy.name/archives/bfc-introduction.htmlabsolute是绝对定位，定位是从left:0，top:0开始；relative是相对定位，判断定位是通过它的父级对象。要是相对定位和绝对定位组合使用的话，再根据具体情况再议。
1、有用：https://jsfiddle.net/dwqs/eond9m3y/
2、
float和absolute都会脱离文档流进行布局，而relative则不会脱离文档流，只是调整元素的位置。relative 是相对父级定位， absolute 是相对上一个有relative属性的元素定位，而当元素的
height:100%有没有效，是根据上一个相对的元素没有设置高度，从而决定当前的元素的height:100%有没有效。如果当前元素被
float,父级元素需要overflow: hidden;才会被撑开，或者用其他办法。我说的有点乱，哈哈，其实很简单的，搞懂它们的特性就OK了。
原来是我的理解错了，是的，
absolute是根据上一个非static属性的元素定位的。