CSS 位置绝对过渡

简介

CSS 位置绝对过渡是指通过对元素的 position 属性设置为 absolute，让元素脱离了正常文档流并可以进行绝对定位，实现元素位置过渡的效果。

在位置绝对过渡中，元素会相对于其最近的非 static 祖先元素进行定位，若没有非 static 祖先元素，则相对于整个页面进行定位。

使用方法

position 属性

在实现位置绝对过渡的过程中，position 属性起到了至关重要的作用。position 属性用于指定一个元素在文档中的定位方式。

CSS 中的 position 属性有以下值：

• static: 元素的位置将会被遵循文档流计算出来，并且一旦文档改变，它的位置也会改变。
• relative: 元素的位置将会在文档流基础上偏移，但是原来的位置仍有保留，因此如果其他元素还是遵守文档流，它就会占据原来的空间。
• absolute: 元素的位置将会相对于离它最近的非 static 祖先元素进行定位，如果该元素的祖先元素都是 static，则相对于 body 元素进行定位。
• fixed: 元素的位置将会相对于浏览器窗口进行定位，这样它就不会随着页面滚动而移动了。
• sticky: 元素的位置在文档中的流动方向上是静态的，但沿另一个轴方向上的位置将会被遵从顺序（比如滚动时）滚动。

top、right、bottom、left 属性

在元素被设置为绝对位置以后，需要通过对 top、right、bottom、left 属性进行设定来实现位置绝对过度的效果。

• top: 元素与该元素的父容器上边线的距离。
• right: 元素与该元素的父容器右边线的距离。
• bottom: 元素与该元素的父容器下边线的距离。
• left: 元素与该元素的父容器左边线的距离。

在设置 top、right、bottom、left 属性时，可以使用百分比、像素（px）、视口宽度（vw）和视口高度（vh）等单位来进行设置。

代码示例

下面是一个使用位置绝对过渡实现图片放大 zoom in、缩小 zoom out 的示例：

<div class="container">
  <img src="example.jpg" alt="example" class="image">
</div>

.container {
  position: relative;
  width: 50%;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.image:hover {
  transform: scale(1.2);
  z-index: 2;
}

在上面的代码示例中，container 类给了父元素一个相对定位，这使得 image 类的绝对定位是相对于 container 进行的，方便了定位。image 类的 top: 50%; 和 left: 50%; 则将图片定位到了 container 的中心。

在 image 类的 hover 伪类中，通过 transform: scale(1.2); 来实现图片的放大效果，同时将 z-index 属性的值设为了 2，保证图片位于其它元素的前面，达到了层叠效果。

结语

位置绝对过渡是 CSS 中比较常用的定位方式之一，在实际开发中也有很多用途。掌握位置绝对过渡的使用方法，可以为我们带来更多的开发灵活性。