求大佬帮忙解析一段css sticky定位代码?

Question

求大佬帮忙解析一段css sticky定位代码?

发布于
2022-08-12 上海

更新于
2022-08-12

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
</head>

<body>

    <style>
        @import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css);

        .top-navbar {
            height: 70px;
            background-color: rgb(250, 200, 200);
        }

        .app-container {
            height: calc(100vh - 70px);
            background-color: rgb(200, 250, 200);

        }

        .info {
            height: 175px;
            background-color: rgb(200, 200, 250);
        }

        .router {
            width: 100%;
            min-height: 150vh;
            background-color: rgb(120, 50, 250);
        }

        /* ----- 核心代码 ----- */

        .app-container {
            overflow: auto;
        }

        .main {
            display: flex;
        }

        .sticky-box {
            position: sticky;
            top: 0;
        }
    </style>

    <div class="box-wrapper">
        <div class="top-navbar">
            <h1>Part1</h1>
        </div>
        <div class="app-container">
            <div class="info">
                <h1>Part2</h1>
            </div>
            <main class="main">
                <div class="side-navbar">
                    <div class="sticky-box">
                        <h1>Part3</h1>
                    </div>
                </div>
                <div class="router">
                    <h1>Part4</h1>
                </div>
            </main>
        </div>
    </div>
</body>

</html>

请注意图中, 滚动条是app-container标签里的
按照道理来说, 在app-container之内, sticky定位只能生效Part2和main标签(因为只能生效直系子元素, 我是这么认为的)
但是为什么, 以上css这样写, 我可以让Part3实现sticky定位?
有没有大佬知道是什么原因??

css

html5 html css3

阅读 1.4k

1 个回答

得票最新

何以旧林

597117

发布于
2022-08-12 浙江

✓ 已被采纳

sticky生效是在里它最近的有滚动机制的祖先上
https://developer.mozilla.org...

撰写回答