Проблема Z-Index, у меня нет объяснения этому

Question

У меня есть 2 элемента, один с этим css:

{
    background: #f5f5f5;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    right: 0;
    left: 300px;
    height: 75px;
    z-index: 3;
}

и еще один с этим css:

{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
}

Элемент № 1 находится над элементом № 2. Как это возможно? Я не знаю, что делать, если я установлю z-index элемента 1 в 0, это нормально, но тогда элемент 1 ниже других элементов, и это не должно быть. По сути, элемент 1 - это меню заголовка, а элемент 2 - всплывающее окно на весь экран.

Может ли кто-нибудь помочь?

Answer 1

спасибо за вашу помощь, я разобрался с проблемой. По какой-то причине это на самом деле не имеет ничего общего с CSS. Что я сделал для того, чтобы исправить это было так:

Вся структура HTML была такой:

<div container>
    <div element 1></div>

    <div content>
        <div element 2></div>
    </div>
</div>

Изменение структуры для этого сделано трюк:

<div container>
    <div element 1></div>

    <div content>
    </div>
</div>

 <div element 2></div>

Я не знаю почему, поэтому я был бы признателен, если бы кто-то объяснил это. Я вообще не менял css! Однако я оставлю этот вопрос всем, у кого могут быть подобные проблемы.

Еще раз спасибо!

Answer 2

В блочной модели z-index - это порядок перекрывающихся двумерных объектов. Геометрически говоря, z-индекс - это перпендикулярная ось z, которая пересекает координаты оси y и оси x.

Видимость элементов порядка стека зависит от их значений. Элементы с высоким значением имеют высокий приоритет видимости, и поэтому они перекрывают другие элементы в блочной модели, и элемент с более низким приоритетом даст результат. Однако для этого требуется размещение элементов в объектной модели документа (DOM).

DOM может отображать только элемент со свойством относительной, абсолютной и фиксированной позиции, а не статическим. Это не требует, чтобы элемент был помещен сверху для большей видимости, и при этом это не требует, чтобы быть внизу для меньшей видимости. Пока элемент имеет высокое значение порядка z-index, все остальные элементы будут давать. Это означает, что он будет иметь высокий приоритет, который будет отображаться поверх других. Например, z-индекс со значением 1 имеет высокий приоритет над индексом со значением 0.

Если элемент-1 имеет z-индекс 1, а элемент-2 имеет z-индекс 0, элемент-1 будет иметь более высокий приоритет, и он будет на вершине порядка, а элемент-2 будет доходность из-за его более низкого приоритета.

Это ответ на ваш вопрос. Вы спрашиваете: «Элемент № 1 находится над элементом № 2. Как это возможно?»

Как я сказал выше. Неважно, что выше или что ниже. Важным является значение приоритета z-индекса.

В вашем случае вы поместили элемент-1 с z-index: 3 выше и элемент-2 с z-index: 1000 ниже, думая, что элемент-1 будет иметь высокий приоритет из-за своей позиции DOM. Это неверно. Вы должны понимать, что HTML Sementic структурирует DOM, но CSS стилизует его или придает ему новый вид.

С z-index мы имеем дело с CSS, а не с HTML. Здесь мы не структурируем элементы, мы их стилизуем.

С вашими кодами выше, элемент-2 с z-index: 1000 имеет более высокий приоритет, и это тот, который должен быть поверх другого, независимо от его положения DOM.