Блог

Главная - Вопросы по программированию - Элементы, скрытые за полупрозрачным div, несмотря на изменения в z-стеке

Элементы, скрытые за полупрозрачным div, несмотря на изменения в z-стеке

#javascript #html #css #css-position #bootstrap-5

Вопрос:

У меня есть две кнопки, которые я пытаюсь расположить поверх полупрозрачного div, но по какой-то причине они остаются скрытыми, даже несмотря на то, что я изменил их положение z-индекса. Я понятия не имею, почему это происходит. В настоящее время я использую Bootstrap 5, если это поможет. Вот код:

 .glass {
  height: 100vh;
  background: black;
  opacity: 0.25;
  border-radius: 25px 0 0 25px;
  position: relative;
  top: 0;
  right: 0;
  z-index: 0;
}

.log-in {
  position: static;
  right: 7em;
  margin: 1em;
  z-index: 1;
}

.sign-up {
  position: static;
  right: 0;
  margin: 1em;
  z-index: 1;
}

.btn {
  font-size: .9em;
  padding: .5em 5em;
  margin: 0 .5em;
  width: 5rem;
  color: white;
}

.pill {
  border-radius: 50px;
} 
 <div class="col-lg-5">

  <div class="glass">
    <ul class="navbar-nav">
      <li class="log-in nav-item nav-btn">
        <a class="pill btn btn-outline-light nav-link" href="#">Log In</a>
      </li>

      <li class="sign-up nav-item nav-btn">
        <a class="pill btn btn-light nav-link" href="#">Sign Up</a>
      </li>


    </ul>
  </div>
</div>

Любая помощь будет признательна!

Редактировать:

Да, кнопки полностью видны после изменения непрозрачности на 1. Проблема, с которой я сталкиваюсь, заключается в том, что, когда непрозрачность меньше единицы, это также влияет на кнопки. Они должны быть белыми, но выглядят как серые.

Комментарии:

1. z-index применяется только к расположенным элементам. И позиционированным элементом является один, для которого position имеет значение, отличное от значения по умолчанию static .

2. В приведенном коде кажется, что кнопки находятся выше?

3. Кнопки указаны выше в коде, который вы указали, измените значение opacity на 1, и они появятся сверху.

Ответ №1:

Оказывается, я унаследовал свойство непрозрачности от класса parent .glass. Чтобы исправить свою проблему, я использовал rgba(0,0,0,0.5); вместо opacity: 0.5; Кнопки теперь отображаются в полной непрозрачности, несмотря на прозрачный фон.

Метки: , ,