为什么我的按钮始终显示在所有内容之上？

时间：2019-05-09 16:12:48

标签： html css css3

我的问题很清楚。如您所见：

enter image description here

我尝试了很多z-index，但是没有用。

Codepen example 

$('.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>

2 个答案:

答案 0 :(得分：4)

这是一个堆栈上下文问题，因为您设置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>

相关：

I have position but z index is not working

css z-index issue with nested elements

Why can't an element with a z-index value cover its child?

答案 1 :(得分：0)

我有此解决方案，虽然很hack，但可以正常工作。我在您的js中添加了.css('z-index', 1)，并从您的CSS中删除了z-index。

  $('.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>

相关问题
最新问题