CSS-position/transform

1 需求

---

2 语法

在CSS中，positioning 和 transform 是两个非常重要的概念，它们分别用于控制元素在页面上的布局和变换。

Positioning

CSS中的position属性用于设置元素的定位类型。它有几个值，包括：

• static：这是默认值，元素按照正常的文档流进行定位。
• relative：元素相对于其正常位置进行定位。因此，"left: 20px" 会将元素向右移动20px。
• absolute：元素相对于最近的已定位祖先（即设置了position属性为relative、absolute、fixed或sticky的元素）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。
• fixed：元素相对于浏览器窗口进行定位，即使页面滚动，它也会始终停留在同一的位置。
• sticky：元素根据正常文档流进行定位，然后相对于用户的滚动位置在视口内粘附（固定）在指定的偏移位置。

Transform

transform属性允许你对元素进行2D或3D转换。这些转换可以包括旋转、缩放、倾斜和移动。

• rotate()：围绕一个点旋转元素。
• scale()：改变元素的大小。
• skew()：倾斜元素。
• translate()：移动元素。

例如，你可以使用transform: rotate(45deg);来旋转一个元素45度，或者使用transform: scale(2);来放大元素两倍。

结合使用

虽然positioning和transform是两个不同的概念，但你可以在一个元素上同时使用它们。例如，你可能想要将一个元素定位到页面的某个位置，然后对其进行旋转或缩放。

css.my-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

在这个例子中，.my-element首先被绝对定位到其父元素的中心（使用top: 50%;和left: 50%;），然后使用transform: translate(-50%, -50%);将其自身的中心移动到页面的中心。最后，它被旋转了45度。

---

3 示例

---

4 参考资料