半透明的div隐藏固定的div向上滚动 [英] Semi-opaque div hiding fixed div up scroll
本文介绍了半透明的div隐藏固定的div向上滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何防止半透明div重叠固定div up滚动
< < span class =code-leadattribute> head >
< style type = text / css >
＃导航 {职位 ： < span class =code-keyword> fixed; background-color ： 绿色; width ： 100％; height ： 80px; }
＃ d1 { background-color ： pink; width ： 80％; height ： 600px; }
＃ d2 { background-color ： 黄色; 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 > ; 乳浊DIV < / h3 > < span class =code-keyword>< / div >
< div id = d2 > < h3 > SEMI-OPAQUE DIV < / h3 > < / div >
< / body >
i希望SEMI-OPAQUE div在滚动页面时隐藏在固定div下，就像OPAQUE div一样。 br $> b $ b
我尝试了什么：
i厌倦谷歌搜索但我不能找不到任何描述类似问题的来源。
解决方案
将z-index：1添加到#navigation样式：
＃导航 {
position ： 已修复;
background-color ： green;
width ： 100％;
height ： 80px;
z-index ： 1;
}
演示 [ ^ ]
没有人告诉你Z-Index - 菲利普沃尔顿 [ ^ ]
how do i prevent semi-opaque div from overlapping fixed div up scroll
<head>
<style type="text/css">
#navigation {position: fixed;background-color: green;width: 100%;height: 80px;}
#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>
i want the SEMI-OPAQUE div to hide under the fixed div just like the OPAQUE div,upon scrolling the page.
What I have tried:
i tired to google search but i couldn't find any sources describing similar issues.
解决方案
Addz-index:1to the#navigationstyle:
#navigation { position: fixed; background-color: green; width: 100%; height: 80px; z-index: 1; }
Demo[^]
What No One Told You About Z-Index — Philip Walton[^]
这篇关于半透明的div隐藏固定的div向上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
