Здравсвуйте, пытался сделать z-index для блока ttt-info-block-actions-button-active, но он не работает почему-то. В чем может быть причина?
.ttt-info-block-actions-button {
position: relative;
background-color: black;
border-radius: 8px;
color: white;
width: 150px;
padding: 5px 45px 5px 45px;
align-content: center;
}
.ttt-info-block-actions-button:hover {
opacity: 0.8;
}
.ttt-info-block-title {
font-weight: 700;
}
.ttt-info-block-actions-button-active {
position: absolute;
z-index:9999;
width: 150px;
right: 0;
margin-top: 2px;
border-radius: 8px;
border: 1px solid black;
color: black;
}
.ttt-info-block-actions-button-active>p {
cursor: pointer;
}
.ttt-info-block-actions-button-active>p:hover {
color: #efc567;
}
.ttt-info-block-actions {
position: relative;
width: 100%;
height: 100%;
}
.ttt-info-block-fields>p {
color: #9499a1;
}
.ttt-header-block {
height: 100px;
/* Высота блока хедера */
background: #efc567;
width: 100%;
display: flex;
justify-content: start;
/* Центрирование содержимого по горизонтали */
align-items: center;
/* Центрирование содержимого по вертикали */
}
.ttt-header-block-logo {
margin-left: 10%;
position: relative;
width: 200px;
/* Ширина блока логотипа */
height: 100px;
/* Высота блока логотипа */
}
.ttt-header-logo {
position: absolute;
width: 100%;
/* Ширина логотипа */
height: 100%;
/* Высота логотипа */
background-image: url('/images/logo/res-educ-logo.png');
background-size: contain;
/* Размер изображения сохраняется */
background-repeat: no-repeat;
/* Изображение не повторяется */
background-position: center;
/* Изображение выравнивается по центру */
}
<div>
<div class="ttt-header-block">
<div class="ttt-header-block-logo">
<span class="ttt-header-logo"></span>
</div>
</div>
<div class="ttt-info-block">
<div class="container mt-5">
<div class="container">
<div class="ttt-info-block-actions text-end">
<button @click="toggleActions" class="ttt-info-block-actions-button">Actions</button>
<div v-if="isOpenActions" class="ttt-info-block-actions-button-active text-center">
<p @click="$root.changePage('/trainingform')" class="mt-2">Materials</p>
<p>Vimeo Materials</p>
<p >Training Form</p>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6 col-12">
<div class="row">
<div class="text-start ttt-info-block-title">
<p>Train The Trainer Information</p>
</div>
<div class="col-md-4 offset-md-2 col-6 offset-0 ttt-info-block-fields">
<p>Train The Trainer Name</p>
<p>First Name</p>
<p>Email</p>
<p>Certified By</p>
</div>
<div class="col-md-5 col-6">
<p>1</p>
<p>2 Name</p>
<p>3</p>
<p>4 Number</p>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="row">
<div class="col-md-4 offset-md-2 col-6 offset-0 ttt-info-block-fields">
<p>Company</p>
<p>Last Name</p>
<p>Phone</p>
<p>Certificate Number</p>
</div>
<div class="col-md-5 col-6">
<p>Company</p>
<p>Last Name</p>
<p>Phone</p>
<p>Certificate Number</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>