前言

作为一个后台开发，最不爱写的就是 CSS。然而有些时候还是要了解 CSS。本文作为前端学习的第一篇，主要讲定位部分。position 属性用来指定一个元素在网页上的位置，一共有 5 种定位方式

static(默认)
relative
fixed
absolute
sticky

定义

static

static 是 position 属性的默认值。如果省略 position 属性，浏览器就认为该元素是 static 定位。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。

absolute

absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。

另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。

fixed

fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

元素的位置通过 left、top、right 以及 bottom 属性进行规定。

sticky

sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。比如型表格滚动的时候，表头始终固定。

sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛。

示例

默认定位 static

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="content">
        <div class="box" id="one">One</div>
        <div class="box" id="two">Two</div>
        <div class="box" id="three">Three</div>
        <div class="box" id="four">Four</div>
    </div>
</body>
</html>
复制代码

css

    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two {
        position: static;
        top: 20px;
        left: 20px;
        background: blue;
    }
复制代码

相对定位 relative

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。下面的例子中，注意未应用定位的其它元素是按照 "Two" 在正常位置的情况下进行布局的。

将上述代码样式改为:

    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two {
        position: relative;
        top: 20px;
        left: 20px;
        background: blue;
    }
复制代码

绝对定位 absolute

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。

父元素 static 定位

    .content {
        margin-left: 100px;
        border: 2px solid blue;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two {
        position: absolute;
        top: 20px;
        left: 20px;
        background: blue;
    }
复制代码

父元素 realtive 定位

    .content {
        margin-left: 100px;
        border: 2px solid blue;
        position: relative;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }

    #two {
        position: absolute;
        top: 20px;
        left: 20px;
        background: blue;
    }
复制代码

固定定位 fixed

固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中，"One" 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="content">
        <div class="header">Header</div>
        <div class="blank"></div>
        <p>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
        </p>
    </div>
</body>
</html>
复制代码

css

    .content {
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    .header {
        width: 100%;
        height: 50px;
        background: red;
        color: white;
        position: fixed;
    }
    p {
        margin-top: 50px;
    }
复制代码

粘性布局 sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="content">
        <dl>
            <dt>A</dt>
            <dd>Andrew W.K.</dd>
            <dd>Apparat</dd>
            <dd>Arcade Fire</dd>
            <dd>At The Drive-In</dd>
            <dd>Aziz Ansari</dd>
        </dl>
        <dl>
            <dt>C</dt>
            <dd>Chromeo</dd>
            <dd>Common</dd>
            <dd>Converge</dd>
            <dd>Crystal Castles</dd>
            <dd>Cursive</dd>
        </dl>
        <dl>
            <dt>E</dt>
            <dd>Explosions In The Sky</dd>
        </dl>
        <dl>
            <dt>T</dt>
            <dd>Ted Leo & The Pharmacists</dd>
            <dd>T-Pain</dd>
            <dd>Thrice</dd>
            <dd>TV On The Radio</dd>
            <dd>Two Gallants</dd>
        </dl>
    </div>
</body>
</html>
复制代码

css

    * {
        box-sizing: border-box;
    }
    .content {
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    dl {
        margin: 0;
        padding: 24px 0 0 0;
    }
    dt {
        background: #B8C1C8;
        border-bottom: 1px solid #989EA4;
        border-top: 1px solid #717D85;
        color: #FFF;
        margin: 0;
        padding: 2px 0 0 12px;
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
    }
    dd {
        margin: 0;
        padding: 0 0 0 12px;
        white-space: nowrap;
    }
    dd + dd {
        border-top: 1px solid #CCC
    }
复制代码

本文到此结束，感谢阅读。欢迎关注公众号【当我遇上你】。您的关注是我最大的动力。

参考

来源：oschina

链接：https://my.oschina.net/u/4302946/blog/4267212

标签

sticky

CSS 定位详解

前言

定义

static

relative

absolute

fixed

sticky

示例

默认定位 static

相对定位 relative

绝对定位 absolute

固定定位 fixed

粘性布局 sticky

参考