css - 滚动元素内的absolute

css - 滚动元素内的absolute

现象

scroll 内元素 absolute 定位异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动元素内的absolute</title>
</head>
<style>
    .box{
        --size:200px;
        width: var(--size);
        height: var(--size);
        overflow-y: auto;
        border: 1px solid #00aaee;
    }
    .scroll-box{
        width: 100%;
        height: 500px;
    }
    .absolute{
        position: absolute;
        --size:50px;
        bottom: 0;
        right: 0;
        width: var(--size);
        height: var(--size);
        background-color: yellow ;
    }
</style>
<body>
    <div class="box">
        <div class="scroll-box">
            <div class="absolute"></div>
        </div>
    </div>
</body>
</html>

absolute 元素是再 html 外的 是相对于window的

期望效果

无论scroll-box如何滚动，absolute 始终向对于 box 定位

absolute 描述

w3school

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

解决

.box relative 未解决

位置相对于box但会随scroll-box移动

结论：position 无法脱离dom层级

dom 结构

改变dom层级

<style>
    .box{
        position: relative;
        --size:200px;
        width: var(--size);
        height: var(--size);
        border: 1px solid #00aaee;
    }
    .main{
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    .scroll-box{
        width: 100%;
        height: 500px;
    }
    .absolute{
        position: absolute;
        --size:50px;
        bottom: 0;
        right: 0;
        width: var(--size);
        height: var(--size);
        background-color: yellow ;
    }
</style>
<body>
    <div class="box">
        <div class="main">
            <div class="absolute"></div>
            <div class="scroll-box"></div>
        </div>
    </div>
</body>
posted @ 2021-12-22 09:18  zc-lee  阅读(499)  评论(0)    收藏  举报