[分享]css元素定位后元素性质

在CSS中，元素的定位是非常重要的，可以通过定位来控制元素的显示位置和大小。常用的定位方式有相对定位、绝对定位、fixed定位和sticky定位。/ 相对定位 / .container { : rel...

在CSS中，元素的定位是非常重要的，可以通过定位来控制元素的显示位置和大小。常用的定位方式有相对定位、绝对定位、fixed定位和sticky定位。

/* 相对定位 */
.container {
  position: relative;
  top: 20px;
  left: 50px;
}

/* 绝对定位 */
.image {
  position: absolute;
  top: 0;
  right: 0;
}

/* fixed定位 */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
}

/* sticky定位 */
.header {
  position: sticky;
  top: 0;
} 

上述代码分别展示了四种定位方式的实现，而不同定位方式对元素的性质也有所不同。

相对定位：元素的定位相对于其原始位置进行偏移，不改变元素在文档流中的位置，因此不影响其他元素的位置和尺寸。

绝对定位：元素的定位相对于其最近的已定位父元素或根元素进行偏移，会从文档流中删除，因此会影响其他元素的位置和尺寸。

fixed定位：元素的定位相对于浏览器窗口进行偏移，会从文档流中删除，因此也会影响其他元素的位置和尺寸，但元素会随着滚动条的滚动保持在页面上的相对位置不变。

sticky定位：元素在其父元素内的定位方式在满足特定条件时变为fixed，在其父元素内表现为滚动时固定在某个位置，不会从文档流中删除，因此不会影响其他元素的位置和尺寸。