粘性定位技巧-优快云博客

需求：随着页面高度变化，中间区域的头部固定，不随页面高度的变化而跟随滚动

解决方案：粘性定位，记得设置 z-index属性。

固定定位不可行，会随着页面高度的变化超出中间区域，不符合要求。

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .box {
                height: 300px;
                width: 100%;
                margin: 0 auto;
                background-color: red;
                position: relative;
                overflow: scroll;
                margin-top: 20px;
            }
            .abso{
                position: sticky;
                top: 0;
                left:0;
                width: 110%;
                height: 50px;
                background-color: green;
            }
            .msg{
                width: 110%;
                height: 600px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="abso">
                123123
            </div>
            <div class="msg">
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
            </div>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .box {
                height: 300px;
                width: 100%;
                margin: 0 auto;
                background-color: red;
                position: relative;
                overflow: scroll;
                margin-top: 20px;
            }
            .abso{
                position: sticky;
                top: 0;
                left:0;
                width: 110%;
                height: 50px;
                background-color: green;
            }
            .msg{
                width: 110%;
                height: 600px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="abso">
                123123
            </div>
            <div class="msg">
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
            </div>
        </div>
    </body>
</html>

转载：http://t.csdn.cn/3EA3I