overflow:auto;导致子元素定位随着滚动条滚动而向上滚动

相对定位的父元素;设置overflow:aotu;之后;相对定位的子元素会随着父元素滚动

      • 当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位
        • 红色div在定位父元素的下面,并且没有在页面上显示,
        • 当我们滚动滚动条的时候,红色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=

你可能感兴趣的:(css,html)