我有一些类似于下面的代码:
HTML
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
当我点击一个按钮时，我赋予 div 以下属性:
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
因此，基本上我将 darkOverlay 设为深色半透明并将其置于最前面。然后我还显示白色文本并将其带到(甚至更多)前面。
但是，darkOverlay 似乎仍将其半透明效果转换在我的白色文本之上。这导致白色文本不像我需要的那样显示为白色。我应该怎么做才能确保我的白色文本脱颖而出？
CSS [在页面加载时]
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
最佳答案
如果问题出在白色文本上，那是因为从来没有将颜色设置为白色。
$('#whiteText').css('color','white');
或者完整的例子:
<!DOCTYPE HTML>
<html>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4'></script>
<style>
#darkOverlay {
position: absolute;
top: 0px;
height:100%;
width:100%;
z-index:-100;
}
#whiteText {
display: none;
position: absolute;
}
</style>
<body>
<div id="darkOverlay"></div>
<div id="content">
<div id="whiteText">I need to be clear bright white!</div>
</div>
<div style="position: relative">
<button id="clickme">clickme</button>
</div>
</body>
<script>
$("#clickme").click(function(e) {
$('#darkOverlay').css('background-color','rgba(50,50,50,0.5)');
$('#darkOverlay').css('z-index','100');
$('#whiteText').css('color','white');
$('#whiteText').css('display','block');
$('#whiteText').css('z-index','500');
});
</script>
</html>
关于javascript - 强制嵌套的 div 显示在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18949787/