返回

庖丁解牛定位：position属性详解，轻松布局网页中的元素

前端

定位元素与相对定位元素

在介绍定位属性position之前，我们先来了解一下定位元素和相对定位元素的概念。

  • 定位元素 ：是指在页面中具有明确位置的元素，它不会随着页面其他元素的位置变化而改变自己的位置。

  • 相对定位元素 ：是指相对于其正常位置进行定位的元素。相对定位元素的定位参照物是其父元素。

position属性

position属性用于指定元素的定位类型，它可以取以下五个值：

  • static（静态定位） ：这是position属性的初始值，也是默认值。静态定位元素不会脱离文档流，它将按照正常的流式布局规则显示在页面中。

  • relative（相对定位） ：相对定位元素相对于其正常位置进行定位。相对定位元素的定位参照物是其父元素。相对定位元素可以向左、右、上、下移动，但它不会脱离文档流。

  • absolute（绝对定位） ：绝对定位元素脱离文档流，它相对于其最近的定位祖先元素进行定位。绝对定位元素可以向左、右、上、下移动，并且可以超出其父元素的范围。

  • fixed（固定定位） ：固定定位元素脱离文档流，它相对于视口进行定位。固定定位元素始终显示在视口的相同位置，即使页面滚动，它也不会移动。

  • sticky（粘性定位） ：粘性定位是相对定位和固定定位的结合体。粘性定位元素在没有滚动时表现为相对定位元素，在滚动时表现为固定定位元素。粘性定位元素的定位参照物是其父元素。

实例演示

下面我们通过几个实例来演示position属性的用法。

<!DOCTYPE html>
<html>
<head>

<style>
.container {
  width: 500px;
  height: 500px;
  background-color: #eee;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.box.static {
  position: static;
}

.box.relative {
  position: relative;
  top: 50px;
  left: 50px;
}

.box.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
}

.box.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.box.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
}
</style>
</head>
<body>
<div class="container">
  <div class="box static">静态定位</div>
  <div class="box relative">相对定位</div>
  <div class="box absolute">绝对定位</div>
  <div class="box fixed">固定定位</div>
  <div class="box sticky">粘性定位</div>
</div>
</body>
</html>

在这个实例中，我们定义了一个容器元素container，并在其中放置了五个盒子元素box。每个盒子元素都具有不同的定位类型。

  • 静态定位的盒子元素box.static不会脱离文档流，它将按照正常的流式布局规则显示在页面中。

  • 相对定位的盒子元素box.relative相对于其正常位置进行定位。它向左移动了50像素，向上移动了50像素。

  • 绝对定位的盒子元素box.absolute脱离文档流，它相对于其最近的定位祖先元素进行定位。它向左移动了100像素，向上移动了100像素。

  • 固定定位的盒子元素box.fixed脱离文档流，它相对于视口进行定位。它始终显示在视口的左上角。

  • 粘性定位的盒子元素box.sticky在没有滚动时表现为相对定位元素，在滚动时表现为固定定位元素。它向左移动了50像素，向上移动了50像素。当页面滚动时，它会固定在视口的左上角。