在CSS中，position属性是实现页面布局的重要工具之一，它可以帮助我们精确控制元素的位置和行为。同时，z-index属性则用于控制元素的堆叠顺序。本文将详细介绍position属性的五个值（static、relative、fixed、absolute、sticky）以及z-index属性的使用方法，并通过示例代码帮助你更好地理解它们。
一、position属性的五个值
1. static（默认定位）
static是position属性的默认值，表示元素按照正常的文档流进行布局，不会受到top、right、bottom、left等偏移属性的影响。
<div class="static">这是一个静态定位的元素</div>
<style>
.static {
position: static;
border: 1px solid red;
}
</style>2. relative（相对定位）
相对定位的元素会相对于其正常位置进行偏移，但不会脱离文档流。它仍然占据原来的位置空间。
<div class="relative">这是一个相对定位的元素</div>
<style>
.relative {
position: relative;
top: 20px;
left: 20px;
border: 1px solid blue;
}
</style>3. absolute（绝对定位）
绝对定位的元素会脱离文档流，并相对于最近的已定位父元素（position值不为static的元素）进行定位。如果没有找到已定位的父元素，则相对于<html>元素。
<div class="parent">
<div class="absolute">这是一个绝对定位的元素</div>
</div>
<style>
.
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
