Вы на правильном пути с z-index.Сложность в z-index заключается в том, что он переопределяет только порядок размещения WITHIN в своем родительском элементе и работает только для элементов, которые имеют нестатическое свойство position (что угодно, кроме значения по умолчанию).В вашем CSS z-index для .right
div равен 1, а .item-text
z-index равен 2. Хотя кажется, что он должен работать, .item-text
все еще находится внутри .left
div, чья z-index по умолчанию auto
, что ставит его и все его содержимое ниже .right
div.
Однако мы можем изменить это, установив z-index для родительских элементов,Ниже, вместо установки более высокого z-индекса для элемента li
или его содержимого, я установил более высокий z-индекс для желтого div, чтобы он (и его дочерние элементы) перекрывали своего родного брата.Тогда переполнение желтого div будет выше зеленого.
Подробнее о z-index вы можете прочитать здесь: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
.container {
/*We can either use flex positioning, or a combination of float and relative positioning
below to achieve the desired layout.*/
display:flex;
}
.left, .right {
display:inline-block;
width:50%;
height:200px;
/* Below is an alternate way of arranging the elements to get the same result.
I find this useful because it explicitly sets the position property.*/
/*
float:left;
position:relative;
*/
}
.left {
background: yellow;
z-index:2;
overflow:visible;
}
.right {
background: green;
z-index:1;
}
li:hover {
background: red;
width:120%;
}
<div class="container">
<div class="left">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
<div class="right">
</div>
</div>