This is an absolutely positioned div.
This is the main content.
可以设置 fixed 导航栏的 z-index(层叠顺序),将其层叠顺序设置为比绝对定位元素更高。例如:
HTML 代码:
This is an absolutely positioned div.
This is the main content.
CSS 代码:
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #333;
color: #fff;
padding: 10px;
z-index: 10; /* 设置 z-index */
}
.content {
margin-top: 50px; /* 为了避免内容显示在 fixed 导航栏下方,需要给内容加上一定的 margin-top */
}
.absolute-div {
position: absolute;
top: 50px;
left: 50px;
background-color: #f00;
color: #fff;
padding: 10px;
z-index: 5; /* 将绝对定位元素的 z-index 设为低一些,以让其显示在 fixed 导航栏下方 */
}
在上面的代码中,我们给 fixed 导航栏设置了 z-index 为 10,而绝对定位元素的 z-index 只设置为了 5,因此绝对定位元素会显示在 fixed 导航栏的下方。