CSS Position(定位)学习笔记

什么是CSS Position？

CSS Position是一种用于控制HTML元素位置的CSS属性。它允许您将元素放置在文档中的精确位置。在CSS中，有四种不同的定位方式：静态、相对、绝对和固定。

静态定位（Static）

默认情况下，所有HTML元素都使用静态定位。这意味着元素出现在文档流中，它们的位置由文档流和其他元素的位置决定。静态定位通常不需要显式声明。

实例：

cssCopy Code
div {
  background-color: red;
}

相对定位（Relative）

相对定位是指相对于元素本身原来的位置进行移动。您可以使用 top、bottom、left 或 right 属性来设置元素相对于其正常位置的偏移量。相对定位不会从文档流中移除元素，因此周围元素的位置不会受到影响。

实例：

cssCopy Code
div {
  position: relative;
  left: 20px;
  top: 10px;
}

绝对定位（Absolute）

绝对定位是相对于最近的已定位父元素进行移动。如果没有已定位的父元素，则是相对于文档的 body 元素。绝对定位可以使用top、bottom、left或right来设置元素相对于其父元素的偏移量。

实例：

cssCopy Code
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

固定定位（Fixed）

固定定位是指元素相对于视口进行定位。这意味着即使页面滚动，元素的位置也不会改变。固定定位可以使用top、bottom、left或right属性来设置元素相对于视口的偏移量。

实例：

cssCopy Code
div {
  position: fixed;
  top: 0;
  left: 0;
}

以上就是CSS Position的四种定位方式及其使用方法。希望能对您的学习有所帮助！