Почему полупрозрачный фон светит в другом div

У меня есть страница с 3 элементами. Один в центре, с хорошим фоном; наложенным на это, является 2-й div, который имеет черный полупрозрачный фон, чтобы лучше читать текст внутри него.Почему полупрозрачный фон светит в другом div

Помимо этого, у меня также есть плавающий div с полностью белым фоном.

По какой-то нечетной причине, когда поплавок накладывается на полупрозрачный div, полупрозрачная задняя панель, похоже, проникает в поплавок.

Мой HTML + CSS, чтобы продемонстрировать мою проблему. Если вы уменьшите окно браузера, правое поплавок переместится в центр div. Он будет правильно оставаться красным, за исключением места, где он попадает в альфа-вставку.

Почему?

<!doctype html> 
<head> 
<style type="text/css"> 
#centerDiv { 
    height: 300px; 
    width: 900px; 
    margin: 0px auto 0px auto; 
    padding: 0 0; 
    background-color: green; 
} 
#centerInset { 
    width: 100%; 
    background-color: rgba(0,0,0,0.3); 
    position: relative; 
    top: 225px; 
    height: 74px; 
    color: white; 
} 
#floater { 
    float: right; 
    width: 200px; 
    height: 300px; 
    border: 1px solid; 
    clear: both; 
    background-color: rgba(250,0,0,1); 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="floater"> 
    <span>some floating text</span> 
</div> 
<div id="centerDiv"> 
    <div id="centerInset"><span>Some random text</span></div> 
</div> 
</body> 
</html>

источник

2014-02-02 Tularis

Хороший вопрос: я только что попробовал с 'z-index', и он все тот же!?! – loveNoHate

Да, я попробовал это с z-index, а также попытался установить свойство непрозрачности, чтобы заставить float полностью очистить. Но ничего не изменилось. Нечетная вещь, эта же «ошибка» появляется в последнем firefox, safari, chrome (да, я знаю, что это также вебкит, например сафари) и версии IE. Поэтому я бы собрал это в стандартах, а не в реализации ... – Tularis

Вам нужно добавить z-indexposition +, чтобы г-индекс работы ->jsfiddle

источник

2014-02-02 21:41:01

Да, обратите внимание на себя. – loveNoHate

А, спасибо за это! По-видимому, важно, является ли позиция статической (по умолчанию) или относительной. Только в относительном понимает z-index. Спасибо! :) – Tularis

Я не уверен, но это может быть что-то вроде этого: Когда вы делаете «centerInset» относительны, z- индекс относится к первому родительскому элементу, который имеет позицию, отличную от статической.

Если вы сделаете положение «centerDiv» относительно, оно будет работать так, как вы ожидаете.

источник

2014-02-02 21:48:26

Почему полупрозрачный фон светит в другом div

ответ

Смежные вопросы