Question

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navigation {position: fixed;background-color: green;width: 100%;height:
80px;overflow: visible;}
#d1 {background-color: pink;width: 80%;height:600px; }
#d2 {background-color: yellow;width: 80%;height: 600px;opacity: 0.9;}
</style>
</head>
<body>
<div id="navigation">
<h3>NAVIGATION MENU AREA</h3>
</div>
<div id="d1">
<br><br><br><br>
<h3>OPAQUE DIV</h3> </div>
<div id="d2"><h3>SEMI-OPAQUE DIV</h3> </div>
</body>
</html>

滚动页面后，修复div＆＃34;导航＆＃34;保持在div的顶部＆＃34; d1＆＃34;但是对于div＆＃34; d2＆＃34;它只是落后于它。我如何制作div＆＃34;导航＆＃34;要始终站在其他div的顶端，我不想改变div的不透明度＃d;＆＃34;？

Answer 1

Z-index指定元素的堆栈顺序。您应该将z-index应用于您希望放在其他元素之上或之下的任何div。

#navigation {
   position:fixed;
   background-color:green;
   width:100%;
   height:80px;
   overflow:visible;
   z-index:999 }

进一步阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

div有一些不透明度隐藏固定div页面滚动

1 个答案: