CSS - position

在 CSS 中，position 是实现元素定位的一种重要方式。使用定位的元素层叠级别比浮动会更高，采用定位来控制元素位置会更加容易。

一般我们使用定位，是通过使用定位模式和边偏移量来确定元素位置的。

定位模式一共有如下：

static
relative
absolute
fixed
sticky
inherit

偏移量就是 top right bottom left 的值，指定到上右下左各基准边的值。

其中 inherit 指定元素从父元素继承 position 的值，存在兼容性的问题，在实际中并不使用。其他 position 值下面我们来逐个介绍并配上实例。

static 静态定位

static 是默认的定位方式，如果元素不写 position 属性，那么其实就是 static 定位的，元素还是按原本的排列方式放置，并不具有特殊性。设置 top bottom left right 以及 z-index 是无效的。

relative 相对定位

relative 是相对定位，要注意是相对元素本该在的位置。也就是说，如果一个元素设置了相对定位，并设置了偏移值，那么这个偏移是相对它本该在的位置而言的。

查看如下的代码，盒子 one 和盒子 two 本来是一起竖直放置的：


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            background-color: green;
        }

        .two {
            background-color: indianred;
        }

        .one,
        .two {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

效果如下：

但是如果我们给盒子 one 加上相对定位 position: relative; 和一个偏移量 top:50px; left:50px;

    .one {
        position: relative;
        top: 50px;
        left: 50px;
        background-color: green;
    }

那么效果将会是如下：

（图中的灰色的原本的绿色盒子 one 的位置）

可以看出，盒子 one 相对与原本没有定位时候的位置偏移了，偏移的量就是我们设置的距离左边 50px, 距离顶部 50px 。而且，下面的盒子 two 的位置并不影响，并不会去占据盒子 one 的位置。

所以相对定位的盒子的特性：

“相对”是相对于没有定位时原本所在的位置
原来的位置依然保留，其他区域的盒子并不受影响

absolute 绝对定位

绝对定位是以最近的带有定位的上级元素来确定位置的。（这里的上级元素包括直接父级元素，爷爷级的元素或者更高层级的元素）

实例：

如下的盒子中，我们如果希望将黄色的盒子放在灰色线所在的位置，那么怎么做呢？

这是两个上面盒子的代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            margin: 100px;
            background-color: green;
        }
        .in {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="in"></div>
    </div>
</body>
</html>

如果你在里面的盒子 in 加上绝对定位，并给定偏移值，像这样：

 .in {
    position: absolute;
    top:0px;
    left: 50px; 
    width: 100px;
    height: 100px;
    background-color: orange;
}

那么得到的结果其实是：

发现黄色盒子并不在绿色盒子里面，那么这是为什么呢，其实这是因为给了绝对定位的盒子会向上级元素查找，直到找到具有定位的父级元素来作为基准确定位置。如果一直没有找到。那么就会以浏览器（Document ）来定位。

然而，我们应该以父级盒子 one 为基准进行定位，那么就应该给 one 一个定位，所以，我们还需要给 one 加上定位 posiion:relative; 至于为什么是给 relative，因为其他定位都可能产生副作用，relative 是最合适的。[ 这里父元素给 static 相当于没有定位，给 absolute 会继续向上找定位的父级，fixed 固定在窗口，其他定位特性更加不合适或者会影响本身]

.one {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: green;
}

如此便可以实现：

当给一个元素添加绝对定位的时候，如果它后面还有其他非定位的元素，那么其他元素是会占据它的原本位置的，这一点是区别于相对定位的。而且，如果子元素需要相对直接父元素进行定位，那么最好给父元素一个 relative 定位。

fixed 固定定位

相比之下，fixed 布局就要简单的多。我们常见的页面中，在滚动的时候，会有一部分是始终在窗口中的，比如网页广告，当你打开窗口，不论你怎么滚动，它就是始终都在某个角落固定。

它的定位基准其实就是浏览器窗口，所以，其实可以看作是一种特殊的绝对定位。

「注意⚠️：Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。」

<html>

<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        p.fixed {
            position: fixed;
            top: 30px;
            right: 5px;
        }
    </style>
</head>

<body>

    <p class="fixed">这里被固定定位了，不随页面滚动</p>
    <p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
    <p>AAA</p>
    <p>AAA</p>
    <p>AAA</p>
    ...
</body>
</html>

sticky 粘性定位

粘性定位结合了 relative 和 fixed 的特性，可以说是根据用户的滚动在相对定位和固定定位之间切换。元素在滑动超出指定的偏移值之前是相对定位，在超出之后就成了固定定位了。

「注意⚠️：Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix」

比如，下面指定了 top 为 0。如果class="sticky"的 p 元素一直随着页面滑动，该 p 元素会到上面， top 成为负值。所以，在超出前，会跟着页面滑动，但在超出后，就成了 fixed 固定定位固定在页面顶端。这便是 sticky 定位。

<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0px;
            padding: 5px;
            background-color: orange;
            border: 2px solid #4CAF50;
        }
    </style>
</head>

<body>

    <p>滚动页面</p>
    <p class="sticky">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

    <div style="padding-bottom:1000px">
        <p>滚动</p>
        <p>来回滚动</p>
        <p>滚动</p>
        <p>来回滚动</p>
        <p>滚动</p>
        <p>来回滚动</p>
    </div>

</body>
</html>

至此，CSS position 的内容就到这里了，其中 relative 和 absolute 是用的最多的定位方式，且实际有许多布局技巧，再做分享！