第 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.实际例子：
下面是一个结合使用相对、绝对和固定定位的示例：
relative boxabsolute boxfixed box
.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 上关注我
里多伊·哈桑
以上就是CSS 位置 – 控制元素放置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629902.html
微信扫一扫 
支付宝扫一扫 
