2

Есть два элемента

<div class="menu_1">
            321321
            </div>
            <div class="menu_2">
            11
            </div>

CSS

.menu_1{
background-color:#333333;
height:300px;

z-index: 1; 

}

.menu_2{
background-color:#cccccc;
height:400px;

z-index: 0; 

}

Но почему то первый блок не перекрывает второй, а идут поочередно, почему?

3 ответа 3

3

Он и не должен перекрывать, если не задан стиль position. Задайте например position : absolute

И z-index ставьте больше 1, т.к. это дефолтное положение.

1
  • 1
    1 - это не дефаултное значение. И даже 0 - не дефаултное. 0 - это уровень фона. А дефаултное значение auto и оно не создаёт контекст, в отличие от любого числа.
    – Qwertiy
    Commented 25 авг. 2015 в 19:55
1

z-index, отличный от auto только создаёт новый контекст и управляет расположением элемента поверх или под другими элементами внутри родительского контекста. За пределы родительского контекста выбраться нельзя, как-то взаимодействовать с элементами вне него - тоже.

Помимо z-index контекст создают opacity, transform и position при своих недефаултных значениях. Возможно, ещё что-то - навскидку в голову не приходит.

Контекс никак не связан с расположением элемента по x и y, поэтому наложения одного элемента на другой не происходит и не должно происходить. Для наложения надо использовать позиционирование, либо отрицательный margin.

1

По умолчанию у ваших блоков стоит position:static, соответственно, они выводятся в общем потоке элементов страницы - один за другим - последовательно. Свойство z-index работает только с установленным позиционирование, т.е. position: {relative, absolute, fixed} Задайте второму блоку отрицательный margin, например, margin-top: -50px и позиционирование блокам. Увидите ожидаемое наложение. Обязательно усвойте значения, которые может принимать свойство position и как они работают. Понимание этих основ избавит от многих проблем в будущем.

.menu_1{ background-color:#333333; height:300px; position: relative; z-index: 2; }

.menu_2{ background-color:#cccccc; height:400px; margin-top: -50px; position: relative; z-index: 1; }

Ваш ответ

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

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