position定位方式——元素应该显示在什么位置

position: static; 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 相对定位 相对于其本身正常位置来进行定位，它原本所占的空间仍保留；
position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body），此时元素原先在正常文档流中所占的空间会关闭，就像元素原来不存在一样，绝对定位后会生成一个块级框，而不管它原先在正常流中是何种类型。
position: fixed;（固定位置）——与窗口同步
该定位的参照为为浏览器的窗口，定位元素不会于页面一起滚动

sticky 粘黏定位自动挂住

请输入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Postition</title>
    <style type="text/css">
        .container {
            background: #eee;
            width: 600px;
            height: 1000px;
            margin: 0 auto;
        }

        nav {
            position: -webkit-sticky;
            position: sticky;
            top:0;

        }

        nav {
            height: 50px;
            background: #999;
            color: #fff;
            font-size: 30px;
            line-height: 50px;
        }

        .content {
            margin-top: 30px;
            background: #ddd;
        }

        p {
            line-height: 40px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <nav>我是导航栏</nav>
    <div class="content">
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
    </div>
</div>

</body>
</html>

评论