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()：移动元素。