Проблема в отображением z-index

Question

Как можно решить проблему, что окно, которое открывается, показывается ниже, чем такой же элемент ниже

Код: https://codepen.io/Grishundel/pen/JjMGGRQ

.my-block {
  width: 40%;
}

.input-box {
  margin-top: 20px;
}

label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.input-box-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.color-box-dropdown,
.color-box-select {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: scale(.92);
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s all;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 3%);
}

.color-dropdown {
  display: none;
}

.color-dropdown {
  position: absolute;
  right: 0;
  z-index: 5;
  top: 100%;
  min-width: 400px;
  max-height: 300px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  padding: 10px;
  box-shadow: 0px 4px 20px rgb(0 0 0 / 10%);
  border-radius: 20px;
}

.color-dropdown.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.8rem;
}

<div class="my-block">
  <div class="input-box input-background selected-box  input-box-flex">
    <label for="">Выберите цвет фона:</label>
    <div class="color-box-dropdown">
      <div class="color show-drop" style="background: red"></div>
      <div class="color-dropdown">
        <div class="color-box-select" data-color="#000000" data-id="0">
          <div class="color" style="background: #000000"></div>
        </div>
        <div class="color-box-select" data-color="#ffffff" data-id="1">
          <div class="color" style="background: #ffffff"></div>
        </div>
        <div class="color-box-select" data-color="#263238" data-id="2">
          <div class="color" style="background: #263238"></div>
        </div>
        <div class="color-box-select" data-color="#212121" data-id="3">
          <div class="color" style="background: #212121"></div>
        </div>
        <div class="color-box-select" data-color="#3e2723" data-id="4">
          <div class="color" style="background: #3e2723"></div>
        </div>
        <div class="color-box-select" data-color="#bf360c" data-id="5">
          <div class="color" style="background: #bf360c"></div>
        </div>
        <div class="color-box-select" data-color="#e65100" data-id="6">
          <div class="color" style="background: #e65100"></div>
        </div>
        <div class="color-box-select" data-color="#ff6f00" data-id="7">
          <div class="color" style="background: #ff6f00"></div>
        </div>
        <div class="color-box-select" data-color="#f57f17" data-id="8">
          <div class="color" style="background: #f57f17"></div>
        </div>
        <div class="color-box-select" data-color="#827717" data-id="9">
          <div class="color" style="background: #827717"></div>
        </div>
        <div class="color-box-select" data-color="#33691e" data-id="10">
          <div class="color" style="background: #33691e"></div>
        </div>
        <div class="color-box-select" data-color="#1b5e20" data-id="11">
          <div class="color" style="background: #1b5e20"></div>
        </div>
        <div class="color-box-select" data-color="#004d40" data-id="12">
          <div class="color" style="background: #004d40"></div>
        </div>
        <div class="color-box-select" data-color="#006064" data-id="13">
          <div class="color" style="background: #006064"></div>
        </div>
        <div class="color-box-select" data-color="#01579b" data-id="14">
          <div class="color" style="background: #01579b"></div>
        </div>
        <div class="color-box-select" data-color="#0d47a1" data-id="15">
          <div class="color" style="background: #0d47a1"></div>
        </div>
        <div class="color-box-select" data-color="#1a237e" data-id="16">
          <div class="color" style="background: #1a237e"></div>
        </div>
        <div class="color-box-select" data-color="#311b92" data-id="17">
          <div class="color" style="background: #311b92"></div>
        </div>
        <div class="color-box-select" data-color="#4a148c" data-id="18">
          <div class="color" style="background: #4a148c"></div>
        </div>
        <div class="color-box-select" data-color="#880e4f" data-id="19">
          <div class="color" style="background: #880e4f"></div>
        </div>
        <div class="color-box-select" data-color="#b71c1c" data-id="20">
          <div class="color" style="background: #b71c1c"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="input-box input-color selected-box  input-box-flex">
    <label for="">Выберите цвет текста:</label>
    <div class="color-box-dropdown">
      <div class="color show-drop" style="background: red"></div>
    </div>
  </div>
</div>

Answer 1

const dropdownBtn = document.querySelectorAll('.dropdown-color-selected');

for (let i = 0; i < dropdownBtn.length; i++) {
  dropdownBtn[i].addEventListener('click', function() {
    this.nextElementSibling.classList.toggle('dropdown-color-active');

    let dropdownColors = this.nextElementSibling.children[0].children;
    for (let i = 0; i < dropdownColors.length; i++) {
      dropdownColors[i].addEventListener('click', function() {
        dropdownColors[i].parentElement.parentElement.classList.remove('dropdown-color-active');

        this.parentElement.parentElement.previousElementSibling.style.cssText = this.style.cssText;
      })
    }
  })
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.select-color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 480px;
  width: 25%;
}

.block-color {
  width: 40px;
  height: 40px;
  margin: 4px;
  background-color: var(--color);
  border-radius: 50%;
  cursor: pointer;
}

.dropdown-color {
  position: relative;
}

.dropdown-colors {
  position: absolute;
  display: none;
  right: 0;
  background-color: #fff;
  z-index: 9;
}

.dropdown-colors>div {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 420px;
  border-radius: 24px;
  margin: 0 auto;
  box-shadow: 0 0 11px 1px rgba(0, 0, 0, .1);
}

.dropdown-color-active {
  display: block;
}

<div class="container">
  <div class="select-color color-font">
    <label for="">Выберите цвет фона:</label>

    <div class="dropdown-color">
      <div class="block-color dropdown-color-selected" style="--color: red"></div>
      <div class="dropdown-colors">
        <div>
          <div class="block-color" style="--color: lightyellow"></div>
          <div class="block-color" style="--color: yellow"></div>
          <div class="block-color" style="--color: orange"></div>
          <div class="block-color" style="--color: lightgreen"></div>
          <div class="block-color" style="--color: green"></div>
          <div class="block-color" style="--color: darkgreen"></div>
          <div class="block-color" style="--color: royalblue"></div>
          <div class="block-color" style="--color: blue"></div>
          <div class="block-color" style="--color: darkblue"></div>
          <div class="block-color" style="--color: violet"></div>
          <div class="block-color" style="--color: purple"></div>
          <div class="block-color" style="--color: lightgray"></div>
          <div class="block-color" style="--color: darkgray"></div>
          <div class="block-color" style="--color: gray"></div>
          <div class="block-color" style="--color: darkred"></div>
          <div class="block-color" style="--color: black"></div>
        </div>

      </div>
    </div>
  </div>

  <div class="select-color color-font">
    <label for="">Выберите цвет текста:</label>

    <div class="dropdown-color">
      <div class="block-color dropdown-color-selected" style="--color: red"></div>
      <div class="dropdown-colors">
        <div>
          <div class="block-color" style="--color: lightyellow"></div>
          <div class="block-color" style="--color: yellow"></div>
          <div class="block-color" style="--color: orange"></div>
          <div class="block-color" style="--color: lightgreen"></div>
          <div class="block-color" style="--color: green"></div>
          <div class="block-color" style="--color: darkgreen"></div>
          <div class="block-color" style="--color: royalblue"></div>
          <div class="block-color" style="--color: blue"></div>
          <div class="block-color" style="--color: darkblue"></div>
          <div class="block-color" style="--color: violet"></div>
          <div class="block-color" style="--color: purple"></div>
          <div class="block-color" style="--color: lightgray"></div>
          <div class="block-color" style="--color: darkgray"></div>
          <div class="block-color" style="--color: gray"></div>
          <div class="block-color" style="--color: darkred"></div>
          <div class="block-color" style="--color: black"></div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 2

Нужно переделать верстку. У тебя класс ( class="color-dropdown" ) находится в class="color-box-dropdown" и у класса (color-dropdown) z-index 2, а у класса ( class="color-box-dropdown ) z-index 5. Так работать не будет. Если ето попап окно вынеси его отдельно.

БЛОГ НА HUSL

Проблема в отображением z-index

Ответы (2 шт):