Заставить вложенный div показать сверху

Question

Заставить вложенный div показать сверху

0

У меня есть код, похожий на следующий:

HTML

<div id="darkOverlay"></div>
<div id="content">
    <div id="whiteText">I need to be clear bright white!</div>
</div>

Когда я нажимаю кнопку, я даю divs следующие свойства:

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

adrianmc 23 сен. 2013, в 01:47

Источник

Теги:

javascript

html

css

html5

css3

1 ответ

Ещё вопросы

Ben A. Hilleli · Accepted Answer · 2013-09-22T20-53-00.000Z

Если это белый текст, о котором идет речь, это потому, что ничто никогда не устанавливает цвет в белый цвет.

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