本文详细介绍了CSS中的定位属性，包括static、relative、absolute和fixed四种方式，以及它们在页面布局中的应用。特别是absolute和fixed定位，分别用于创建独立层和固定位置元素。此外，还讲解了堆叠顺序z-index的概念，说明了如何通过z-index控制不同定位元素的层级关系，并通过实例展示了其工作原理。
元素定位：position
属性值：（1）static 默认值 没有定位 静态定位
- relative 相对定位：相对于自己原位置定位，定位后原位置保留配合left，right，top，bottom移动。
- absolute 绝对定位：相当于已经定位（relative，absolute，fixed推荐relative定位）的父元素定位，如果父元素没有定位，逐级往上找，最后相对于body定位。定位后原位置不保留，应用于：形成独立的一层。
- fixed 固定定位（相对于浏览器窗口定位，定位后原位置不保留配合left、right、top、bottom移动 当四个元素同时存在，left和top的优先级高于right和bottom）应用场景：固定在页面某个位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 30px;
height: 90px;
background: red;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="box"><a href="#"></a></div>
</body>
</html>
堆叠顺序：z-index：number；
取值越大层级越往上，同时定位，后面的元素在上面，必须配合定位使用（relative，absolute，fixed）可以取负值。
例如：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
background-color: deepskyblue;
position: relative;
}
.one,.two{
width: 200px;
height: 200px;
}
.one{
background-color: plum;
position: absolute;
top: 59px;
left: 50px;
z-index: 777;
}
.two{
background-color: palegreen;
z-index: 666;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
