CSS2理解 - position篇_position:sticky css2-优快云博客

本文详细解析了CSS中的五种定位方式：static、relative、fixed、absolute和sticky，包括它们的特性和使用场景，以及如何与其他布局属性如left、right、top和bottom结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. position 属性的五个值：

static 静态定位，为默认的定位
relative 相对定位，相对于元素的正常位置定位
fixed 固定定位，相对于浏览器的窗口定位，即使滚动条移动，依旧占有窗口中的位置
absolute 绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
sticky 粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

2. left,right,top,bottom属性只有在非staic定位中有效

如果没有写定位则默认定位为static定位

3. staic定位

浏览器默认定位方式，如果没有定义position则为static定位，在该种定位中设置left,right,top,bottom均无效。在该种定位中块状元素单独一行显示，内联元素在一行之内显示。该种定位如果使用了float后则显示float的性质，关于float的性质在后续说明。

4. relative相对定位

相对于其正常位置定位，可以设置left,right,top,bottom属性，且属性值也可以设置成负值，该属性原有占据的空间不能被其它元素使用，使用相对定位后，该元素浮在默认层级的上一层，例如三个div，则中间一个div使用了相对定位,并设置了top:100px，则该div向下移动100个像素，原有该div占据的空间依然占据，向下移动的过程中会覆盖第三个div的内容，但不会将第三个div向下挤出，该div没有脱离文档流，原有的空间依旧占据。

可以在块状元素div中使用相对定位，也可以在内联元素span上使用相对定位

对内联元素(span)和块状元素(div)和内联块状元素均有效。

5. fixed 固定定位

相对于窗口的定位，脱离了文档流，不再占有原有的位置，其下面元素会通过上移占据其位置，会浮在其它的定位的上一层，可能会覆盖其它元素的内容。div中的子元素采用fixed定位后，该元素脱离文档流，脱离了原来的div的束缚，并且相对于窗口来定位显示。对内联元素(span)和块状元素(div)和内联块状元素均有效。

6. absolute 绝对定位

相对于最近的通过非static定位的元素,会一直向上找父容器的定位属性，如果发现某个父容器才用了非static的模式进行了定位则相对于该容器进行定位。一般如果子元素想要采用绝对定位，则要讲其父元素设置为relative相对定位。对内联元素(span)和块状元素(div)和内联块状元素均有效。

7. sticky粘连定位

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

通过测试发现，子元素采用sticky定位的时候，当滚动条滚过其父容器的高度或宽度的时候，其元素也会看不见。仅通过谷歌浏览器测试，其它浏览器未测试，大家注意下。但如果父容器采用了sticky定位，则该父容器在被滚动条划过的时候是相对于窗口定位的。对内联元素(span)和块状元素(div)和内联块状元素均有效。