абсолютно позиционирован элемент скрывает прозрачный элемент, прежде чем он

Question

У меня есть три блока элементов рядом друг с другом, первый и последний являются прозрачными, а средний абсолютно позиционирован:

.box { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.box1 { 
 
    background: yellow; 
 
    opacity: 0.5; 
 
} 
 
.box2 { 
 
    background: red; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 800px; 
 
    height: 800px; 
 
} 
 
.box3 { 
 
    background: black; 
 
    opacity: 0.5; 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div> 
 
<div class="box box3"></div>

Поскольку .box1 и .box3 - opacity:0.5, я думал, что они оба будут показывать через .box2, но только .box3. Зачем?

Answer 1

Вы можете использовать z-index (наибольшее число находится сверху, а самое низкое - внизу).

Подробнее:

• Adding z-index

Это свойство присваивается целое значение (положительное или отрицательное), которая представляет собой положение элемента вдоль оси , Если вы не знакомы с осью z, представьте, что страница имеет несколько слоев один над другим. Каждый слой пронумерован. Уровень с большим числом отображается над слоями с меньшими числами.

---

.box { 
 
    position:relative; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.box1 { 
 
    z-index:20; 
 
    background: yellow; 
 
    opacity: 0.5; 
 
} 
 
.box2 { 
 
    z-index:10; 
 
    background: red; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 800px; 
 
    height: 800px; 
 
} 
 
.box3 { 
 
    z-index:30; 
 
    background: black; 
 
    opacity: 0.5; 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div> 
 
<div class="box box3"></div>

Answer 2

Box2 в роли контейнера в вашем примере.

Для этого необходимо изменить структуру DOM.
Это не единственное решение, тем лучше, чем я думаю.

.box-container { 
 
    background: red; 
 
    width: 800px; 
 
    height: 800px; 
 
} 
 
.box { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
.box1 { 
 
    background: yellow; 
 
    opacity: 0.5; 
 
} 
 
.box2 { 
 
    background: black; 
 
    opacity: 0.5; 
 
}

<div class="box-container"> 
 
    <div class="box box1"></div> 
 
    <div class="box box2"></div> 
 
</div>