position属性(position(五种属性,以及每个属性的特点))
朋友们，position属性和position(五种属性,以及每个属性的特点)是当今热门话题，但是它们的内涵和影响力可能会让人感到困惑。在本篇文章中，我将为你们揭示它们的本质和重要性，希望能够为你们带来新的认识。
position属性值有哪些
position属性值有static、relative、absolute、fixed、sticky。
1、static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
2、relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
3、absolute：是不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。
4、fixed：是指不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
5、sticky：盒位置根据正常流计算，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为table时），该元素定位均不对后续元素造成影响。
参考资料来源：百度百科-position
CSS中position属性详解
根据W3C的解释为：position属性规定元素的定位类型，把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值absolute：生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right或者 z-index声明）。
inherit：规定应该从父元素继承 position属性的值。
我们用的最多的absolute和relative，接下来可以通过具体例子来更加直观地体现。
举例一：绝对定位
position: absolute；绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。
#box_relative{
position: absolute;
left: 30px;
top: 20px;
}
二：相对定位
position: relative；相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative{
position: relative;
left: 30px;
top: 20px;
}
注意
position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline;来解决的。position:relative不会隐式改变display的类型。
position五种属性
默认布局，元素出现在正常的文档流中（忽略top，bottom、left，right或者z-index声明）。
（1）不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）
（2）不会使元素脱离文档流（元素原本位置会被保留）
（3）没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
（4）提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面。）
注：z-index只能在position属性值为relative或absolute或fixed的元素上有效。
（1）使元素完全脱离文档流（在文档流中不再占位）
（2）使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
（3）使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
（4）相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
（5）相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
（6）提升层级（同相对定位）
fixed是特殊版的absolute，相对于浏览器窗口进行定位。
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
该定位基于用户滚动的位置，不脱离文档流。
它的行为像 position:relative;。
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
position(五种属性,以及每个属性的特点)
1. position: relative;相对定位
1>不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）
2>不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）
3>没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）
4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位）
2. position: absolute;绝对定位
1>使元素完全脱离文档流（在文档流中不再占位）
2>使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）
3>使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）
4>相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）
5>相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）
6>提升层级（同相对定位）
3. position: fixed;固定定位
fixed生成固定定位的元素，相对于浏览器窗口进行定位。
4. position:static：默认值
默认布局。元素出现在正常的流中（忽略 top, bottom, left, right或者 z-index声明）。
5. position: sticky粘性定位
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15及更早 IE版本不支持 sticky定位。 Safari需要使用-webkit- prefix。
6. position: inherit
规定应该从父元素继承 position属性的值。
7. posiyion: initial
设置该属性为默认值，详情查看 CSS initial关键字
initial关键字用于设置 CSS属性为它的默认值。
initial关键字可用于任何 HTML元素上的任何 CSS属性。
文章到此结束，希望我们对于position属性和position(五种属性,以及每个属性的特点)的问题能够给您带来一些启发和解决方案。如果您需要更多信息或者有其他问题，请随时联系我们。