目录
什么是绝对定位: 设置为绝对定位的元素框从文档流完全删除。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
例子: 有两个父子关系的div元素
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px;
width: 200px;
height: 200px;
background: violet;
}
.boxSon {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid blue;
}
</style>
<div class="box">
<div class="boxSon"></div>
</div>
1、 当父元素有定位(相对或绝对),子元素绝对定位,但不设置top、left值时
结果:子元素位置没有发生变化,因为父元素有边距,所以子元素也有边距
2、当父元素没有定位(相对或绝对),子元素绝对定位,但不设置top、left值时
结果:子元素位置没有发生变化,因为父元素有边距,所以子元素也有边距
所以:当子元素绝对定位时,无论父元素有没有定位,只要子元素不设置top和left值,子元素位置不发生变化
3、当父元素有定位(相对或绝对),子元素绝对定位,并且设置top、left值时
.boxSon {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
top: 100px;
border: 2px solid blue;
}
结果:相对于定位的父元素进行定位。top值和left值也是根据父元素来
4、当父元素没有定位(相对或绝对),子元素绝对定位,并且设置top、left值时
.box {
margin: 100px;
}
.boxSon {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
border: 2px solid blue;
}
结果:相对于定位的父元素进行定位。但是父元素没有定位,就根据根元素html进行定位
5、overflow与定位
如果父级元素不设置宽高,实际宽高则由内容撑开。倘若子元素设置绝对定位,则子元素脱离文档流,那么父元素高度为0。如果父元素再设置定位,并且设置overflow: hidden。则此时子元素会消失(看不见啦)
解释:因为父元素高为0了,子元素溢出又隐藏,当然看不见啦