举例详解CSS中position属性的使用

下面是详细讲解“举例详解CSS中position属性的使用”的完整攻略。

CSS中position属性的使用

在CSS中，position属性用来设置元素的定位方式。常见的定位方式有relative、absolute、fixed和sticky。下面将对这四种定位方式进行详细的说明。

relative

relative表示相对于元素自身的位置进行定位。相对定位的元素仍然保留其原先所占的空间，只是相对于自身进行移动。

div {
  position: relative;
  left: 50px;
  top: 50px;
}

在该示例中，div元素相对于其原来的位置向右移动了50px，向下移动了50px。

absolute

absolute表示相对于最近的非static元素进行定位。如果不存在非static元素，则相对于body进行定位。绝对定位的元素不再占据文档流中的位置，而是脱离了文档流，可以随意移动。

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50px;
  top: 50px;
}

在该示例中，child元素相对于parent元素进行定位，向右移动了50px，向下移动了50px。

fixed

fixed表示相对于浏览器窗口进行定位。固定定位的元素不随页面滚动而滚动，始终停留在浏览器窗口的固定位置。

div {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

在该示例中，div元素被固定在浏览器窗口的右下角。

sticky

sticky表示相对于其父元素的位置进行定位，父元素必须具有明确的高度，当元素滚动到指定位置时，它将变为固定定位，直到滚动回指定位置。

.container {
  width: 300px;
  height: 400px;
  overflow-y: scroll;
}

.item {
  position: sticky;
  top: 10px;
}

在该示例中，当item元素滚动到.container元素的顶部时，它将变为固定定位，距离.container顶部为10px。当滚动条向下滚动时，item元素会按照正常的文档流排列。

以上就是关于CSS中position属性的详细解释和示例说明，希望对大家有所帮助。