[CSS] - position

position属性能帮助你控制一个元素的定位。

position的值有以下6种：

static，静态定位，HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom,left, right, z-index影响。
relative，相对定位。是相对元素的正常位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。可以通过 left/right/top/bottom/z-index 将元素往各方向推。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute，绝对定位。元素的位置相对于最近的已定位父元素(任何position属性value不是static的父元素)，如果元素没有已定位的父元素，那么它的位置相对于<html>。绝对定位使元素的位置与文档流无关（绝对定位元素会从文档流中移除掉，就好像没有这个元素一样），因此不占据空间。绝对定位的元素和其他元素重叠。
fixed, 固定定位，元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关（固定定位元素会从文档流中移除掉，就好像没有这个元素一样），因此不占据空间。固定定位的元素会和其他元素重叠。其实固定定位和绝对定位几乎相同，不同的是固定定位总是相对文档来定位的，而不是特定的父元素，并且固定定位不受滚动影响。
sticky(experimental): 当滚动的视点定位到某个特定的点，sticky元素会被当作一个relative值来处理，在这个时候，元素会固定在某个被告知去粘贴的位置。
inherit: 继承定位。定位的值不会及级联，所以用继承定位来特别强值元素的定位从父元素继承 position 属性的值。

举个🌰：

//html
<div class="parent">
  Parent element
<div class="element positions">Child element</div>
</div>

//css
.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  margin-top: 10px;
}

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上代码为postion 默认为static,其结果如图：

static

在css 文件中修改 . positions样式为：

. positions {
  position: relative;
  left: 30px; 
  top: 30px;
}

其结果如图：

relative

在css 文件中修改 .element样式为：

. positions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

其结果如图：

absolute

在css 文件中修改 .element样式为：

. positions {
  position: fixed;
  left: 30px; 
  top: 30px;
}

其结果如图：

fixed

在css 文件中修改 .element样式为：

. positions {
  position: sticky;
  top: 50px;
}

当页面足够长，并且child element滑动到离document顶端的50px时，child element将固定在top：50px的位置。

sticky.gif

绝对定位元素通常以相对定位元素为容器块

absolute child element and relative parent element

如果父元素不是relative，那么结果会是这样的：

absolute child element and static parent element

[CSS] - position

推荐阅读更多精彩内容