相对定位的父元素;设置overflow:aotu;之后;相对定位的子元素会随着父元素滚动
-
-
- 当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位
- 我们把多余的div去掉,只保留红色div和定位父元素
- 页面上并没有显示红色div,但是父元素依然存在滚动条
- 当我们向下滚动滚动条的时候,红色div在定位父元素的最底部,也就是说定位父元素的滚动条是由红色div显示出来了,
- **那么我们可以假象,当父元素设置了`overflow:auto`,的时候,自己就变成了一个巨大的容器,显示区域依然是我们设置的宽高,对于相对定位的子元素来说,坐标系的0点位置依然是定位父元素的左下角,但是当我们滚动滚动条的时候,坐标系会随着滚动条的滚动而发生改变,所以当我们滚动滚动条的时候,即使子元素设置了相对定位,位置也会依然发生改变**
-
<style>
.box1 {
width: 100px;
height: 100px;
overflow: auto;
position: relative;
margin: 100px auto;
border: solid 1px blue;
}
.box4 {
width: 100%;
position: absolute;
bottom: 0px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
这是一串超出父元素的文本
</div