Почему position: fixed не следует правилам контекста стекирования?

Игра с z-индексом rel и rel1 изменит позицию в стеке, но fx никогда не будет поверх них даже с более высоким z-index, если только он не будет перемещен поверх rel в DOM. Почему это происходит ?

.fx {
  position: fixed;
  height: 30px;
  width: 30px;
  background-color: pink;
  margin-top: 60px;
  margin-left: 30px;
  z-index: 10000;
}

.rel {
  z-index: 7;
  position: relative;
  height: 500px;
  width: 200px;
  background-color: red;
  margin-top: 30px;
}

.rel1 {
  z-index: 6;
  position: relative;
  height: 500px;
  width: 100px;
  background-color: black;
  margin-top: -300px;
}

<div class = "rel">
</div>

<div class = "rel1">
</div>

<div class = "fx">
</div>

html css dom css-position z-index

09.04.2021 17:23

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

Он соответствует правилам стека, но его позиция еще не установлена, вы должны установить позицию вверху: 0px;

09.04.2021 17:30

Вам необходимо указать атрибуты позиции .fx:

Обычно комбинация либо top, либо bottom, плюс, либо left, либо right.

Рабочий пример:

.fx {
  position: fixed;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: pink;
  margin-top: 60px;
  margin-left: 30px;
  z-index: 10000;
}

.rel {
  z-index: 7;
  position: relative;
  height: 500px;
  width: 200px;
  background-color: red;
  margin-top: 30px;
}

.rel1 {
  z-index: 6;
  position: relative;
  height: 500px;
  width: 100px;
  background-color: black;
  margin-top: -300px;
}

<div class = "rel">
</div>

<div class = "rel1">
</div>

<div class = "fx">
</div>

09.04.2021 17:32

Как говорит МДН оposition: fixed:

Its final position is determined by the values of top, right, bottom, and left.

Итак, ваш код будет выглядеть так:

.fx {
  position: fixed;
  height: 30px;
  width: 30px;
  background-color: pink;
  margin-top: 60px;
  margin-left: 30px;
  z-index: 10000;
  top: 20px;
  left: 10px;
}

.rel {
  z-index: 7;
  position: relative;
  height: 500px;
  width: 200px;
  background-color: red;
  margin-top: 30px;
}

.rel1 {
  z-index: 6;
  position: relative;
  height: 500px;
  width: 100px;
  background-color: black;
  margin-top: -300px;
}

<div class = "rel">
  </div>

  <div class = "rel1">
  </div>

  <div class = "fx">
  </div>

09.04.2021 17:33

Другие вопросы по теме

Создать случайный цвет фона в React

Показывать модальный Boostrap при нажатии кнопки

Изменить родительское подменю стиля

Высота строки CSS не идет полностью вверх или вниз

Элементы не отображаются должным образом с высотой: 100vh

Как центрировать горизонтальную полосу прокрутки?

Разделите 100 на равные проценты в JavaScript

Margin-top перемещает весь верхний колонтитул

Повторно используйте раскрывающийся список для всех td в таблице

Укажите процентную ширину CSS как функцию ширины области просмотра

Почему position: fixed не следует правилам контекста стекирования?

Ответы 3

Другие вопросы по теме

Похожие вопросы