CSS z-index не работает с относительной позицией - PullRequest
Новая
       6

CSS z-index не работает с относительной позицией

0 голосов
/ 03 июля 2018

Мне не повезло с тем, чтобы заставить z-index работать. Хотя все это кажется довольно простым. Мне просто нужно показать какой-то контент, перезаписывая другой контент. Это делается для создания простого раскрывающегося элемента управления, так что выпадающее меню временно отображается без следующего перемещения контента вниз, а затем обратно вверх.

Вот мой код, упрощенный и автономный: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Z-Axis</title>
    <style>
        #main_div {
            position: relative;
            z-index: 0;
            top: 0px;
            left: 0px;
        }
        .dropdown {
            position: relative;
            z-index: 1;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="main_div">
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <ul class="dropdown">
            <li>5</li>
            <li>10</li>
            <li>20</li>
        </ul>
        <p>line 2 of text</p>
        <p>line 3 of text</p>
        <p>line 4 of text</p>
        <p>line 5 of text</p>
        <p>line 6 of text</p>
    </div>
</body>
</html>

Как видите, я позаботился о создании родителя stacking context в main-div, но это не помогло. Когда я запускаю вышеупомянутое в Firefox или Chrome, отображается раскрывающийся список, и строки 2-6 сдвигаются вниз по странице, а не прячутся за раскрывающимся списком.

position должен быть относительным, потому что этот материал будет компонентом React и будет размещен где-то на большей странице. Раскрывающийся список должен находиться прямо под строкой 1, а строки 2-6 должны скрываться в нижней плоскости z-index.

1 Ответ

0 голосов
/ 03 июля 2018

То, что вы ошиблись, было position: relative вместо position: absolute. Я изменил это, и теперь это работает. position: relative делает это только, ну, относительно, не рендерится независимо от других элементов DOM.

Я добавил background: red, чтобы эффект был лучше виден.

Ваш z-index работает просто отлично, но элемент по-прежнему отображается с учетом других элементов DOM.

Согласно MDN :

  • относительно : Элемент позиционируется в соответствии с обычным потоком документа , а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, выделенное для элемента в макете страницы, такое же, как если бы позиция была статической. Это значение создает новый контекст стека, когда значение z-index не равно auto. Его влияние на таблицу - * - элементы group, table-row, table-column, table-cell и table-caption не определены.
  • абсолютный : Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места . Он расположен относительно своего ближайшего предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока. Его окончательное положение определяется значениями сверху, справа, снизу и слева.

ключевая часть 

.dropdown {
    position: absolute;
    ...
}

Отрывок 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Z-Axis</title>
    <style>
        #main_div {
            position: relative;
            z-index: 0;
            top: 0px;
            left: 0px;
        }
        .list-wrapper {
          position: relative;
        }
        .dropdown {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: red;
        }
    </style>
</head>
<body>
    <div id="main_div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
      <div class="list-wrapper">
        <p>line 1 of text</p>
        <ul class="dropdown">
            <li>5</li>
            <li>10</li>
            <li>20</li>
        </ul>
        <p>line 2 of text</p>
        <p>line 3 of text</p>
        <p>line 4 of text</p>
        <p>line 5 of text</p>
        <p>line 6 of text</p>
      </div>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...