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
网友评论