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

最新推荐文章于 2024-11-15 16:48:50 发布

原创最新推荐文章于 2024-11-15 16:48:50 发布 · 2.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html

当CSS中设置`overflow:auto`时，子元素的相对定位会随滚动条变化。即使子元素定位超出父元素，父元素仍会出现滚动条。滚动时，子元素的位置会根据坐标系的变化而改变，保持相对定位的状态。

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

<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>
            <div class="box4">
                balabala
            </div>
        </div>
    </div>
</body>

在这里插入图片描述
这是页面初始化效果

我们给红色div设置的坐标设置:button:0;那么,红色div应该始终在父元素的底部(box2并没有设置position属性;所以是相对于box1来进行定位的);当我们滚动滚动条的时候;红色div也就是设置了相对定位的div会随着父元素的滚动而进行滚动;为什么会这样呢?

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            overflow: auto;
            position: relative;  
            margin: 100px auto;
            border: solid 1px blue;
        }
        .box4 {
            width: 100%;
            position: absolute;
            bottom: -100px;  /*当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                这是一串超出父元素的文本这是一串超出父元素的文本这是一串超出父
                元素的文本这是一串超出父元素的文本这是一串超出父元素的文本这是一串
                超出父元素的文本这是一串超出父元素的文本这是一串超出父元素的文本
            </div>
            <div class="box4">
                balabala
            </div>
        </div>
    </div>
</body>

当我们将红色div的buttom属性设置为-100的时候;也就是将红色div在父元素外定位

在这里插入图片描述

红色div在定位父元素的下面,并且没有在页面上显示,

在这里插入图片描述

当我们滚动滚动条的时候,红色div显示在页面上,并且和刚刚的效果一样,是随着父元素的滚动而滚动的; 那么外层父元素的滚动条和里面的文字信息撑起来的高度有没有关系呢?

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            overflow: auto;
            position: relative;
            margin: 100px auto;
            border: solid 1px blue;
        }
        .box4 {
            width: 100%;
            position: absolute;   
            bottom: -100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box4">
            balabala
        </div>
    </div>
</body>