position属性，css position
大家好，关于position属性很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于css position的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
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五种属性
默认布局，元素出现在正常的文档流中（忽略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;，它会固定在目标位置。
CSS position属性
position很重要，有以下几个值：static，relative，absolute，fixed。
*所有主流浏览器都支持 position属性，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
好了，关于position属性和css position的问题到这里结束啦，希望可以解决您的问题哈！