CSS定位简述

CSS 有五种主要的定位方式,分别是:

静态定位(Static):

默认的定位方式,元素按照文档流正常排列。使用静态定位,元素不会收到 top、right、bottom、left 等属性的影响。实例如下:

<div class="box">
  <h2>这是一个标题</h2>
  <p>这是一个段落描述</p>
</div>
.box {
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

相对定位(Relative):

元素相对于其默认位置进行定位,不会改变其它元素的位置。通过设置 top、right、bottom 或 left 属性来控制元素的位置。实例如下:

<div class="box">
  <h2>这是一个标题</h2>
  <p>这是一个段落描述</p>
  <button>点击我</button>
</div>
.box {
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

button {
  position: relative;
  top: 20px;
  left: 20px;
}

在 CSS 相对定位(relative position)中,默认情况下,元素是相对于其自身在文档流中原来的位置进行定位的,而不是相对于其某个父元素或其他元素。如果需要相对于其他元素进行定位,需要配合使用定位父级(positioned parent)来实现。

在 CSS 中,如果一个元素被设置为 relative 定位,并且其父元素也被设置了 position 属性(除去默认值 static),那么该元素就会相对于其父元素进行定位。这个有 position 属性的父元素称为定位父级(positioned parent)。

例如:

.parent {
  position: relative;
}

.child {
  position: relative;
  top: 20px;
  left: 50px;
}

以上代码中,.parent 元素被设置为相对定位,同时 .child 元素被设置为相对定位,并且指定了 top 和 left 值。由于 .child 元素是 .parent 元素的子元素,并且 .parent 元素被设置了相对定位,所以 .child 元素会相对于父元素 .parent 进行定位。

绝对定位(Absolute)

建立在相对定位的基础上,元素脱离文档流,相对于最近的已定位祖先元素进行定位,或者相对于 body 元素进行定位。实例如下:

<div class="box">
  <h2>这是一个标题</h2>
  <p>这是一个段落描述</p>
  <button>点击我</button>
  <img src="img.jpg" alt="图片">
</div>
.box {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

img {
  position: absolute;
  top: 20px;
  right: 20px;
}

固定定位(Fixed)

元素相对于浏览器窗口进行定位,即使页面滚动,它的位置也不会改变。实例如下:

<button class="back-to-top">回到顶部</button>
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

粘性定位(Sticky)

元素根据用户滚动的位置在相对于视口和最近的具有滚动框的祖先对齐时表现为相对定位,否则表现为固定定位。实例如下:

<ul class="nav">
  <li><a href="#">导航1</a></li>
  <li><a href="#">导航2</a></li>
  <li><a href="#">导航3</a></li>
  <li><a href="#">导航4</a></li>
</ul>
.nav {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

总之,利用 CSS 的五种定位方式,我们可以在网页中达到自由布局的效果,同时还可以通过其它属性调整元素的样式和位置,从而创造出更加丰富多彩的页面效果。

举例说明