第 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 值相对于其最近的定位祖先（位置为相对、绝对或固定的祖先）来定位元素。如果不存在这样的祖先，它将相对于 <html> 元素定位。
示例：
.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 上关注我
里多伊·哈桑
