Как заставить детей перекрывать своего родителя с помощью z-index

Question

Итак, у меня есть родительский элемент с идентификатором #bronze и дочерний элемент класса .price-container. Я хочу, чтобы дочерний элемент перекрывал родительский элемент, а это означает, что его координата z должна быть выше. Однако кажется, что z-index полностью игнорируется, хотя элемент относительно позиционирован.

Почему в этом случае не работает z-index?

Спасибо

.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  height: inherit;
  justify-content: center;
}

.flex-container * {
  align-self: center;
}

.flex-container .second-container {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: 20vh;
  margin-bottom: 5rem;
}

.second-container>div {
  width: 200px;
  height: 200px;
  margin: 3rem;
  background-size: 150px, 150px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

.second-container>div .price-container {
  height: 40px;
  width: 200px;
  border-radius: 8px;
  position: relative;
  top: 12rem;
  margin: 0 auto;
  z-index: 0;
}

#bronze-price {
  border: 2px solid #BE5A06;
}

#bronze {
  background: orange
}

<div class="flex-container">
  <div class="second-container">
    <div id="bronze">
      <div class="price-container" id="bronze-price"></div>
    </div>
  </div>
</div>

Answer 1

Попробуйте:

Вы должны использовать top: 6rem; Я вижу, у вас больше, чем вы ожидаете. также я использовал селектор #bronze-price для определения кода.

.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  height: inherit;
  justify-content: center;
}

.flex-container * {
  align-self: center;
}

.flex-container .second-container {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: 20vh;
  margin-bottom: 5rem;
}

.second-container>div {
  width: 200px;
  height: 200px;
  margin: 3rem;
  background-size: 150px, 150px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
   border:2px solid black;
}

.second-container>div .price-container {
  height: 40px;
  width: 200px;
  border-radius: 8px;
  position: relative;
  top: 6rem;
  margin: 0 auto;
  z-index: -1; 
}

#bronze-price {
  border: 5px solid #BE5A06;
  display:inline-block;
  z-index:0;
}

#bronze {
  background: orange
}

<div class="flex-container">
  <div class="second-container">
    <div id="bronze">
      <div class="price-container" id="bronze-price"></div>
    </div>
  </div>
</div>