CSS五种定位的区别

CSS五种定位的区别

CSS定位是非常重要的一种功能，可以将网页中的内容放在指定的位置，使网页布局工整美观。定位属性position一共有5个值，分别是static、relative、fixed、absolute、sticky。根据情况的不同，使用的属性值也大多不同，选择最合适的方法才能有最好的效果。它们的区别如下：

①static;这是定位的默认值，写和不写都一样，相当于没有定位，本身在哪就在那。个人感觉没有什么意义，也不会用到。
②relative;这个单词是相对的、相比较的意思，顾名思义就是与元素本身的位置进行对比。比如想将元素向右移动100像素，就用position:relative;left:100px;即可。

需要注意的是，这种方法并不会改变元素在文档流中实际占的位置。即它移动后的位置可能与其他元素重叠，但是它本身所占的空间依然在，哪怕它已经完全不在这个空间里待着了。其他的元素没法在它的空间上待着（除非其他元素也用定位强行改变位置）。如图，第二句话可以通过向上移动与第一句话重叠，但它原本所占的空间（红色框内）依然在，因此第三句话没法占在第二句话的位置上，只能往下排。

③fixed；单词意思为不变的、使固定，这个也不难理解。它的作用是将元素定位在浏览器窗口的相对位置，不会随着因为上下、左右的滚动条而变的文档流变化。换句简单的话说，被fixed定位的元素就钉死在你的浏览器窗口上了，不管你怎么滚动网页，它都会在屏幕中的那一块待着，一动不动。最常见的例子是各大网站的侧边导航栏了

写定位数值的时候要注意，是以浏览器为原点。比如position:fixed;top:30px;right:5px;意思就是浏览器窗口内正上方往下30像素，最右边向左5像素的位置。
需要注意的是，使用fixed定位的元素抛弃了在文档流中的位置，因此不仅可以与其他元素重叠，本身的空间也会被释放，即不再占有空间了。
④absolute;单词意思为绝对的，即绝对定位，不以自身为标准，而是以父容器内的绝对数值当做定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。注意必须给父容器一个定位才能使absolute生效，随便写个定位即可，relative就行，不用写具体的数值。这样不仅父元素的位置不会改变，定位功能也能生效。

需要注意的是，使用absolute定位的元素抛弃了在文档流中的位置，因此不仅可以与其他元素重叠，本身的空间也会被释放，即不再占有空间了。
⑤sticky；单词意思为黏住，也是在各大网站的侧边导航栏用的多。这种定位会随着浏览器窗口滚动而发生变化，正常情况下它的位置相对文档流不变，但是当页面滚动超出目标区域时，它就会变的和fixed一样相对浏览器固定了位置。简单来说就是在跨越特定阈值前为相对定位，之后为固定定位。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

以上就是5种定位的区别，在不同的情况下使用不同的方法进行定位，否则可能会产生一些排版错乱的问题。

另外在定位时很可能某个元素和其他元素有重叠的区域，把其他元素显示的内容给盖住了，这种情况可以使用z-index属性解决。元素初始的z-index值为0，可以给予元素不同的值来确定显示的优先级，数值高的会覆盖数值低的元素。如有两个元素重叠，z-index值为1的元素就会盖住z-index值为0的元素。

逆战班：云峰