Почему моя кнопка всегда появляется над всем?

Question

Моя проблема очень ясна. Как видите:

Я много пробовал z-index, но не работает.

Пример кодекса

$('.fa-ellipsis-h').click(function() {
  $(this)
    .css('z-index', 1)
    .children('.dropdown')
    .toggleClass('display-block');
});

#simpleList {
  margin: 0px;
  width: 100%;
  height: auto;
  overflow: auto;
  padding: 0;
}
#simpleList li {
  list-style-type: none;
  padding: 15px 20px 15px 80px;
  position: relative;
  cursor: normal;
}
#simpleList li:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
#simpleList li i.fa-bars {
  display: block;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: move;
  font-size: 24px;
  color: #888;
}
#simpleList li .fa-ellipsis-h {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  font-size: 18px;
  color: #888;
  padding: 4px 13px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 3;
}
#simpleList li .fa-ellipsis-h .dropdown {
  position: absolute;
  display: none;
  padding: 3px 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
  bottom: -70px;
  right: 0;
  min-width: 150px;
  background-color: #fff;
  z-index: 4;
}
#simpleList li .fa-ellipsis-h .dropdown::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  transform-origin: center center;
  transform: rotate(45deg);
  position: absolute;
  right: 17px;
  top: -5px;
  background-color: #fff;
}
#simpleList li .fa-ellipsis-h .dropdown div {
  padding: 8px 15px;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
  position: relative;
}
#simpleList li .fa-ellipsis-h .dropdown div:hover {
  background: #f0f0f0;
}
#simpleList li .kap {
  display: flex;
  flex-direction: column;
}
#simpleList li .kap .baslik {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px 0;
}
#simpleList li .kap .tarih_cont {
  display: flex;
  color: #6f6f6f;
  font-size: 14px;
}
#simpleList li .kap .tarih_cont .tire {
  padding: 0 3px;
}

.display-block {
  display: block !important;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />

<div class="bolumler">
  <ul id="simpleList" class="list-group">
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 1</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 2</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 3</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 4</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 5</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
  </ul>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

Это проблема контекста стека, родительский элемент всплывающего окна создает контекст стека, потому что вы устанавливаете z-index и transform.Вы должны удалить их, чтобы увидеть всплывающее окно над другими кнопками:

$('.fa-ellipsis-h').click(function() {
  $(this)
    .children('.dropdown')
    .toggleClass('display-block');
});

#simpleList {
  margin: 0px;
  width: 100%;
  height: auto;
  overflow: auto;
  padding: 0;
}
#simpleList li {
  list-style-type: none;
  padding: 15px 20px 15px 80px;
  position: relative;
  cursor: normal;
}
#simpleList li:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
#simpleList li i.fa-bars {
  display: block;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: move;
  font-size: 24px;
  color: #888;
}
#simpleList li .fa-ellipsis-h {
  display: block;
  position: absolute;
  top: 50%;
  /*transform: translateY(-50%); removed*/
  margin-top:-15px; /* added to fix the center*/
  right: 30px;
  font-size: 18px;
  color: #888;
  padding: 4px 13px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  /*z-index: 3; remove */
}
#simpleList li .fa-ellipsis-h .dropdown {
  position: absolute;
  display: none;
  padding: 3px 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
  bottom: -70px;
  right: 0;
  min-width: 150px;
  background-color: #fff;
  z-index: 4;
}
#simpleList li .fa-ellipsis-h .dropdown::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  transform-origin: center center;
  transform: rotate(45deg);
  position: absolute;
  right: 17px;
  top: -5px;
  background-color: #fff;
}
#simpleList li .fa-ellipsis-h .dropdown div {
  padding: 8px 15px;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
  position: relative;
}
#simpleList li .fa-ellipsis-h .dropdown div:hover {
  background: #f0f0f0;
}
#simpleList li .kap {
  display: flex;
  flex-direction: column;
}
#simpleList li .kap .baslik {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px 0;
}
#simpleList li .kap .tarih_cont {
  display: flex;
  color: #6f6f6f;
  font-size: 14px;
}
#simpleList li .kap .tarih_cont .tire {
  padding: 0 3px;
}

.display-block {
  display: block !important;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />

<div class="bolumler">
  <ul id="simpleList" class="list-group">
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 1</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 2</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 3</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 4</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 5</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
  </ul>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Похожие:

У меня есть позиция, но индекс z не работает

css z-index проблема с вложенными элементами

Почему элемент со значением z-index не может покрыть своего потомка?

Answer 2

У меня есть это решение, оно взломанное, но оно работает. Я добавляю .css('z-index', 1) в ваши js и удаляю z-index из вашей css.

  $('.fa-ellipsis-h').click(function() {
    $(this)
      .css('z-index', 1) // here
      .children('.dropdown')
      .toggleClass('display-block');
  });

#simpleList {
  margin: 0px;
  width: 100%;
  height: auto;
  overflow: auto;
  padding: 0;
}
#simpleList li {
  list-style-type: none;
  padding: 15px 20px 15px 80px;
  position: relative;
  cursor: normal;
}
#simpleList li:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
#simpleList li i.fa-bars {
  display: block;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: move;
  font-size: 24px;
  color: #888;
}
#simpleList li .fa-ellipsis-h {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  font-size: 18px;
  color: #888;
  padding: 4px 13px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
#simpleList li .fa-ellipsis-h .dropdown {
  position: absolute;
  display: none;
  padding: 3px 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
  bottom: -70px;
  right: 0;
  min-width: 150px;
  background-color: #fff;
}
#simpleList li .fa-ellipsis-h .dropdown::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  transform-origin: center center;
  transform: rotate(45deg);
  position: absolute;
  right: 17px;
  top: -5px;
  background-color: #fff;
}
#simpleList li .fa-ellipsis-h .dropdown div {
  padding: 8px 15px;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
  position: relative;
}
#simpleList li .fa-ellipsis-h .dropdown div:hover {
  background: #f0f0f0;
}
#simpleList li .kap {
  display: flex;
  flex-direction: column;
}
#simpleList li .kap .baslik {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px 0;
}
#simpleList li .kap .tarih_cont {
  display: flex;
  color: #6f6f6f;
  font-size: 14px;
}
#simpleList li .kap .tarih_cont .tire {
  padding: 0 3px;
}

.display-block {
  display: block !important;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />

<div class="bolumler">
  <ul id="simpleList" class="list-group">
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 1</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 2</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 3</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 4</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <i class="fas fa-bars"></i>
      <div class="kap">
        <div class="baslik">Bolum 5</div>
        <div class="tarih_cont">
          <div class="tamamlandimi">Taslak</div>
          <span class="tire">-</span>
          <div class="tarih">May 09, 2019</div>
        </div>
      </div>
      <div class="fas fa-ellipsis-h">
        <div class="dropdown">
          <div>Önizleme</div>
          <div>Bölümü Sil</div>
        </div>
      </div>
    </li>
  </ul>
</div>
    
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>