0

Здравсвуйте, пытался сделать 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>

1 ответ 1

0

У вас прозрачный блок ttt-info-block-actions-button-active, задайте ему цвет:

.main-container {
  width: 200px;
}

.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;
  background: #00f00f;
  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 class="main-container">
    <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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.