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;
}
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以父级元素为参考定位。