黑豆的博客

position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

position的取值有static、relative、absolute、fixed、sticky，下面我们将对这几个值进行具体介绍。

这里先提一句，下面演示的效果都是在下面这个 demo 基础上修改的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container>div {
      width: 100px;
      height: 100px;
      display: inline-block;
    }
    .left {
      background-color: red;
    }
    .middle1, .middle2 {
      background-color: orange;
    }
    .right {
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>修改前</p>
    <div class="left"></div>
    <div class="middle1"></div>
    <div class="right"></div>
  </div>
  <div class="container">
    <p>修改后</p>
    <div class="left"></div>
    <div class="middle2"></div>
    <div class="right"></div>
  </div>
</body>
</html>

运行结果如下：

# static

static 是HTML元素的默认值，也就是没有定位，将 position 的值设置为 static 的时候，设置 top、right、bottom、left、z-index 无效。

# relative

将 position 的值设置为 relative 时，这个元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置，也就是相对定位是相对其正常位置的。

.middle2 {
  position: relative;
  top: 20px;
  left: 20px;
}

# absolute

当元素的 position 值设置为 absolute 后，元素会被移出正常文档流，并不为元素预留空间，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

.middle2 {
  position: absolute;
  top: 20px;
  left: 20px;
}

上图演示的是 middle2 父元素没有设置定位，给 middle2 设置绝对定位时是相对 html 标签的。

.container {
  position: relative;
}
.middle2 {
  position: absolute;
  top: 20px;
  left: 20px;
}

上图演示的是给 middle2 父元素设置了定位后， middle2 相对于父元素 container 的定位效果。

# fixed

当 position 的值为fixed时，元素会被移出正常文档流，并不为元素预留空间，此时元素的位置相对于浏览器窗口的固定位置，注意：此时即使窗口是滚动的它也不会移动。

# sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。这个值你在开发中可能没用过。下面我们来举个例子，来展示下它的牛x：

在我们开发的过程中有时会遇到上面的需求，当我们将列表滚动到特定的内容时，它的名称需要悬浮到顶部。有可能你是使用 JS 来实现这个功能的，但是当我们知道了 position 的值可以是 sticky 时，只需要使用这个就可以实现我们上面的需求了。

在给出代码前，我们先来复习个简单的标签 dl：

<dl> 标签定义了定义列表，它主要用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>粘性定位</title>
  <style>
    * {
      box-sizing: border-box;
    }

    dl {
      margin: 0;
      padding: 24px 0 0 0;
    }

    dt {
      background: orange;
      color: #FFF;
      font: bold 18px/21px Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 2px 0 0 12px;
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
    }

    dd {
      font: bold 20px/45px Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0 0 0 12px;
      white-space: nowrap;
    }

    dd {
      border-top: 1px solid #CCC
    }
  </style>
</head>

<body>
  <div>
    <dl>
      <dt>电视剧</dt>
      <dd>电视剧1</dd>
      <dd>电视剧2</dd>
      <dd>电视剧3</dd>
      <dd>电视剧4</dd>
      <dd>电视剧5</dd>
      <dd>电视剧6</dd>
      <dd>电视剧7</dd>
      <dd>电视剧8</dd>
      <dd>电视剧9</dd>
      <dd>电视剧10</dd>
      <dd>电视剧11</dd>
      <dd>电视剧12</dd>
      <dd>电视剧13</dd>
    </dl>
    <dl>
      <dt>电影</dt>
      <dd>电影1</dd>
      <dd>电影2</dd>
      <dd>电影3</dd>
      <dd>电影4</dd>
      <dd>电影5</dd>
      <dd>电影6</dd>
      <dd>电影7</dd>
      <dd>电影8</dd>
      <dd>电影9</dd>
    </dl>
    <dl>
      <dt>综艺</dt>
      <dd>综艺1</dd>
      <dd>综艺2</dd>
      <dd>综艺3</dd>
      <dd>综艺4</dd>
      <dd>综艺5</dd>
      <dd>综艺6</dd>
      <dd>综艺7</dd>
      <dd>综艺8</dd>
      <dd>综艺9</dd>
      <dd>综艺10</dd>
    </dl>
    <dl>
      <dt>动漫</dt>
      <dd>动漫1</dd>
      <dd>动漫2</dd>
      <dd>动漫3</dd>
      <dd>动漫4</dd>
      <dd>动漫5</dd>
      <dd>动漫6</dd>
      <dd>动漫7</dd>
      <dd>动漫8</dd>
      <dd>动漫9</dd>
      <dd>动漫10</dd>
    </dl>
  </div>
</body>

</html>

参考：

position (opens new window)

← 品字布局 →