Блок с position: absolute не выходит за рамки блока, как исправить?

Question

[wiincked]

Добрый день!

У меня есть два блока, один(child-1) занимает все свободной место, второй блок(child-2) с фиксированной шириной и overflow.
У второго блока есть дочерний блок(absolute-block) с position: absolute, который перекрывает первый блок(child-1) и absolute-block скрыт под child-1.
z-index не помогает, помогает убрать только overflow, но он нужен. Как можно решить эту проблему

<div class="parent">
  <div class="child-1"> </div>
  <div class="child-2">
   <div class="absolute-block"></div>
  </div>
</div>

.parent {
display: flex;
flex-direction: row;
}

.child-1 {
flex-grow: 1;
}

.child-2 {
position: relative;
width: 50px;
overflow-x: auto;
}

.absolute-block {
position: absolute;
top: -20px
right: 40px;
z-index: 1000;
}

Comments

[Brad9aga]

сюды посмотри,ты сам вообще видел результат кода в глаза ?

Answer 1

[siarheisiarhei]

absolute блок: не выйдит, за рамки блока с: position: relative; "фиолетава: overflow....."

Answer 2

[WhiteBearDev]

Добрый день!

z-index нужно вешать на child блоки. На child-1 position: relative и z-index: 10, на child-2 z-index-20.

Если я Вас верно понял, то поможет