CSS 位置 – 控制元素放置

第 13 讲：css 位置 – 控制元素放置

在本次讲座中，我们将探讨 css 位置属性，它允许您控制页面上元素的确切位置。了解不同的定位值及其工作原理将帮助您精确创建动态布局。

1.什么是位置属性？

position 属性指定元素在文档中的位置。您可以使用它来相对于正常流程移动元素，甚至将它们放置在页面上的特定坐标处。

基本语法：

element {
    position: value;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

top、right、bottom 和 left 属性控制元素相对于其容器的放置位置。

2.位置值

以下是最常用的位置值：

立即学习“前端免费学习笔记（深入）”；

• static（默认）：元素根据正常文档流定位。 top、right、bottom、left 属性无效。

• relative：元素相对于其在文档流中的正常位置定位。您可以使用上、右、下或左移动它，但它仍会在原始位置占用空间。

• absolute：元素相对于最近定位的祖先（不一定是父元素）定位，并且从正常文档流中删除。

• fixed：元素相对于浏览器窗口定位，这意味着即使页面滚动它也会保持在原位。

• sticky：元素根据用户的滚动位置在相对位置和固定位置之间切换。

示例：

.box {
    position: relative;
    top: 20px;
    left: 10px;
}

这会将元素从其原始位置 向下移动 20 像素 并将 向右移动 10 像素。

3.静态定位（默认）

默认情况下，所有元素都是静态定位的。这意味着它们出现在页面的自然流程中，无法使用顶部、右侧、底部或左侧属性进行移动。

示例：

.box {
    position: static;
}

4.相对定位

relative 值相对于其正常位置定位元素。使用 top、right、bottom 或 left 属性移动它会移动它，但原始空间仍将在布局中保留。

示例：

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

这会将元素从默认位置 向下移动 20 像素 并将 向右移动 30 像素。

5.绝对定位

absolute 值相对于其最近的定位祖先（位置为相对、绝对或固定的祖先）来定位元素。如果不存在这样的祖先，它将相对于 元素定位。

示例：

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
}

这会将元素放置在距其最近的定位祖先的顶部 50px 和距左侧50px 的位置。

6.固定定位

固定值相对于浏览器窗口定位元素。即使用户滚动，该元素仍保持固定位置。

示例：

.fixed-box {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 50px;
    background-color: #ff5722;
}

该元素将始终出现在视口的右上角，即使用户滚动也是如此。

7.粘性定位

粘性值根据用户的滚动位置在相对和固定之间切换。该元素将表现得像一个相对元素，直到滚动到达指定点，在该点它变得固定。

示例：

.sticky-box {
    position: sticky;
    top: 0;
    background-color: #4caf50;
}

当用户向下滚动时，该元素将粘在视口的顶部。

8. z-索引

z-index 属性控制定位元素的堆叠顺序。 z-index 值较高的元素将出现在值较低的元素之上。

示例：

.box1 {
    position: absolute;
    z-index: 1;
    background-color: #ffc107;
}

.box2 {
    position: absolute;
    z-index: 2;
    background-color: #ff5722;
}

在此示例中，.box2 由于其较高的 z-index 将出现在 .box1 之上。

9.实际例子：

下面是一个结合使用相对、绝对和固定定位的示例：

<div class="relative-box">relative box</div>
<div class="absolute-box">absolute box</div>
<div class="fixed-box">fixed box</div>

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
    background-color: #4CAF50;
    padding: 10px;
}

.absolute-box {
    position: absolute;
    top: 100px;
    left: 50px;
    background-color: #FFC107;
    padding: 10px;
}

.fixed-box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 150px;
    background-color: #FF5722;
    padding: 10px;
    color: white;
}

结论

掌握css中的位置属性可以让你精确控制元素的位置，无论是相对于它们的正常位置、容器还是浏览器窗口。这对于创建复杂的布局和交互式网页设计至关重要。

在 linkedin 上关注我

里多伊·哈桑