力div嵌套顯示在上面

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; 
}

來源

2013-09-22 adrianmc

你能提供所有這三種的div的實際CSS定義？有沒有？ – Tomalla

@Tomalla，我在上面添加了它。雖然沒有太多。 – adrianmc

似乎正在工作，你可能有其他的CSS導致這個問題http://codepen.io/anon/pen/kLzdh –

如果它是白色文字的爭議，這是因爲從來都沒有設置顏色爲白色。

$('#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>

來源

2013-09-22 23:51:25

力div嵌套顯示在上面

回答

相關問題