css布局之position及元素堆叠
position属性
static
HTML 元素默认情况下的定位⽅式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊⽅式定位；它始终根据页⾯的正常流进⾏定位。
relative
position: relative; 的元素相对于其正常位置进⾏定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进⾏调整。
⽐如：
relative{
position:relative;
bottom:100px;
}
操作为相对该元素原本的bottom上移100px，⽽不是想当然的距离其⽗级元素底部100px。
fixed
position: fixed; 的元素是相对于视⼝定位的，这意味着即使滚动页⾯，它也始终位于同⼀位置。 top、right、bottom 和 left 属性⽤于定位此元素。
固定定位的元素不会占据页⾯中的任何空间（类似于浮在页⾯上⽅，不影响原页⾯布局）。
absolute
position: absolute; 的元素相对于最近的定位祖先元素进⾏定位（⽽不是相对于视⼝定位，如 fixed）。
然⽽，如果绝对定位的元素没有祖先，它将使⽤⽂档主体（body），并随页⾯滚动⼀起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
⽐如：
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 150px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h1>position: absolute;</h1>
<p>设置 position: absolute; 的元素会相对于最近的定位祖先进⾏定位（⽽不是相对于视⼝进⾏定位，⽐如 fixed）：</p>
<div class="static">这个 div 元素设置 position: static;
<div class="absolute">这个 div 元素设置 position: absolute;</div>
</div>
</body>
</html>
运⾏效果如下图所⽰：
元素的⽗级元素是默认的static定位，所以该元素将body作为定位依据。
在⽗级元素中添加⼀⾏代码：position:relative;
效果图变为相对⽗级元素定位：
sticky
position: sticky; 的元素根据⽤户的滚动位置进⾏定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视⼝中遇到给定的偏移位置为⽌ - 然后将其“粘贴”在适当的位置（⽐如 position:fixed）必须⾄少指定 top
、right、bottom 或 left 之⼀，以便粘性定位起作⽤。
注意：Internet Explorer、Edge 15 以及更早的版本不⽀持粘性定位。 Safari 需要 -webkit- 前缀（请参见下⾯的实例）。
实例链接：
元素重叠
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前⾯或后⾯）。
元素可以设置正或负的堆叠顺序：
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
该图⽚的z-index值为-1，它将被置于⽂字后⽅。
具有较⾼堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意：如果两个定位的元素重叠⽽未指定 z-index，则位于 HTML 代码中最后的元素将显⽰在顶部。
案例
在图⽚上定位⽂字：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
css固定定位img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>图像⽂本</h1>
<p>在图像左上⾓添加⼀些⽂本：</p>
<div class="container">
<img src="/i/logo/w3logo-2.png" alt="W3School" width="800" height="450">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
效果如图所⽰
将图⽚和⽂字放在由container类定义的div标签中，container采⽤relative定位，⽂字采⽤absolute相对于container类的div定位。总结
relative和absolute最⼤的区别在于：relative相以⾃⾝初始位置为参考定位；absolute以⽗级元素为参考定位。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。