Why does my button always appear above everything? - html

Question

My problem is very clear. As you can see:
I tried a lot of z-index but does not works.
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>

Answer 1

It's a stacking context issue, the parent element of the popup is creating a stacking context because you are setting z-index and transform. You need to remove them to be able to see the popup above the other buttons:
$('.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>
Related:
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?

Answer 2

I have this solution, this is hacky but it's working. I add .css('z-index', 1) in your js and remove the z-index from your 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>