Z-index не работает для вложенного элемента относительно родительского

@alexsave · Регистрация: 18.08.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, опишу проблему, допустим имеется простая компоновка:

HTML5
1
2
3
<div style="width:100%; height:50px; background: red; position:fixed; z-index:50000">
    <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-100"></div>
</div>

Несмотря на то что у родителя z-index:50000, дочерний div все равно получается выше родительского:

Z-index не работает для вложенного элемента относительно родительского

Как можно сделать дочерний div под родительским? В реальном проекте реализовываю навигацию и вот пример на http://jsfiddle.net/mhAA3/, когда наводишь на ссылку дочерний блок выползает НАД родителем

@alexsave · 06.07.2014, 21:04 **[ТС]**

Проблему решил, нужна дополнительная обертка маскирующая fixed-слой:

HTML5
1
2
3
4
5
<div style="width:100%; height:50px; background: red; position:fixed; z-index:50000">
   <div style="width:100%; height:50px; background: red;">
      <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-100"></div>
   </div>
</div>

Измененное решение на http://jsfiddle.net/mhAA3/1/

@Sabio · 06.07.2014, 23:23

Маска-слой не нужна.

HTML5
1
2
3
4
5
<div style="width:100%; height:50px; background: red; position:fixed;">
        <div style="position:relative;">
            <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-1"></div>
        </div>
    </div>

@Academik · 07.07.2014, 01:57

alexsave, работает вроде http://jsfiddle.net/2BZws/

HTML5
1
2
3
<div style="width:100%; height:50px; background: red; position:fixed;">
    <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-1"></div>
</div>

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@MVS76 · 07.07.2014, 04:03

Сообщение от Sabio

Маска-слой не нужна.

Конечно не нужна, зачем дополнительно забивать страницу 100500 строками лишнего кода.
ТС, если вы указываете абсолютное (position: absolute

позиционирование и хотите при этом чтоб он был каким-то слоем, то есть реагировал на такие вещи как "z-index" , то родителю обязательно нужно указать: position: relative;

@alexsave · 07.07.2014, 06:00 **[ТС]**

Всем спасибо за ответы, возможно я как то неверно высказался в первом посте, но мне нужно было чтобы дочерний блок с position:absolute (зеленый) оказался ПОД родительским с position:fixed (красный). Как я понял из сообщения MVS76 родитель должен быть relative, и действительно, если поменять в первом посте fixed на relative и убрать z-index я достигаю нужного эффекта:

http://jsfiddle.net/2BZws/1/

HTML5
1
2
3
<div style="width:100%; height:50px; background: red; position:relative">
    <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-100">   </div>
</div>

Проблема была в том, что мне именно нужен position:fixed для родителя, т.к. в реальном проекте он отвечает за навигацию, зафиксированную сверху

Сообщение от Sabio

Маска-слой не нужна.

HTML5
1
2
3
4
5
<div style="width:100%; height:50px; background: red; position:fixed;">
* * * * <div style="position:relative;">
* * * * * * <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-1"></div>
* * * * </div>
</div>

Ваш пример даёт точно такой же эффект (как в первом посте) и не решает мою проблему: http://jsfiddle.net/2BZws/2/

Сообщение от Mr Coder

alexsave, работает вроде http://jsfiddle.net/2BZws/

- то же самое, не решает указанную проблему

HTML5
1
2
3
<div style="width:100%; height:50px; background: red; position:fixed;">
    <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-1"></div>
</div>

Вот мое решение с маской: http://jsfiddle.net/2BZws/3/

HTML5
1
2
3
4
5
<div style="width:100%; height:50px; background: red; position:fixed;">
        <div style="width:100%; height:50px; background: red;">
            <div style="width:100px; height:100px; position:absolute; left:0; top:0; background:green; z-index:-1"></div>
        </div>
    </div>

и соответствующий пример на реальном (упрощенном) проекте, ДО:

http://jsfiddle.net/mhAA3/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="navigation">
    <nav>
        <ul class="first_navigation_list">
            <li>
                <div class="second_navigation_list"></div>
                <a href="">Ссылка 1</a>
            </li>
            <li>
                <a href="">Ссылка 2</a>
                <div class="second_navigation_list"></div>
            </li>
            <li>
                <a href="">Ссылка 3</a>
                <div class="second_navigation_list"></div>
            </li>
        </ul>
    </nav>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.navigation {
    width: 100%;
    height: 50px;
    position: fixed;
    background: red;
    top:0; 
    left:0;
    z-index: 50000;
}
 
nav {
    max-width:1200px;
    height:50px;
    margin: 0 auto;
    border: 1px solid #BBB;
}
 
ul.first_navigation_list {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    height:50px;
}
 
.first_navigation_list > li {
    float:left;
    height:50px;
    line-height:50px;
    font-size:12px;
    padding:0 11px;
    list-style: none;
}
 
.first_navigation_list > li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight:bold;
    
    -webkit-transition: color 0.5s;
    -o-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}
 
.second_navigation_list {
    width: 100%;
    position: absolute;
    left: 0;
    top: 51px;
    background: green;
    z-index: -10;
    min-height: 220px;
    -webkit-transform: translate3d(0,-320px,0);
    -moz-transform: translate3d(0,-320px,0);
    -ms-transform: translate3d(0,-320px,0);
    -o-transform: translate3d(0,-320px,0);
    transform: translate3d(0,-320px,0);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}
 
.first_navigation_list > li:hover .second_navigation_list {
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}

ПОСЛЕ: http://jsfiddle.net/mhAA3/1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="navigation">
    <div class="nav-wrapper">
        <nav>
        <ul class="first_navigation_list">
            <li>
                <div class="second_navigation_list"></div>
                <a href="">Ссылка 1</a>
            </li>
            <li>
                <a href="">Ссылка 2</a>
                <div class="second_navigation_list"></div>
            </li>
            <li>
                <a href="">Ссылка 3</a>
                <div class="second_navigation_list"></div>
            </li>
           </ul>
       </nav>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.navigation {
    width: 100%;
    height: 50px;
    position: fixed;
    background: red;
    top:0; 
    left:0;
    z-index: 50000;
}
 
.nav-wrapper {
    width: 100%;
    height: 50px;
    background: red;
}
 
nav {
    max-width:1200px;
    height:50px;
    margin: 0 auto;
    border: 1px solid #BBB;
}
 
ul.first_navigation_list {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    height:50px;
}
 
.first_navigation_list > li {
    float:left;
    height:50px;
    line-height:50px;
    font-size:12px;
    padding:0 11px;
    list-style: none;
}
 
.first_navigation_list > li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight:bold;
    
    -webkit-transition: color 0.5s;
    -o-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}
 
.second_navigation_list {
    width: 100%;
    position: absolute;
    left: 0;
    top: 51px;
    background: green;
    z-index: -10;
    min-height: 220px;
    -webkit-transform: translate3d(0,-320px,0);
    -moz-transform: translate3d(0,-320px,0);
    -ms-transform: translate3d(0,-320px,0);
    -o-transform: translate3d(0,-320px,0);
    transform: translate3d(0,-320px,0);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}
 
.first_navigation_list > li:hover .second_navigation_list {
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}

PS: извиняюсь если туплю, я не верстальщик

Комментарий администратора TaatshiЗагружайте изображения и файлы на форум и прикрепляйте к сообщению.
Обновленная Памятка «Как работать в редакторе сообщений»

@MVS76 · 07.07.2014, 06:11

Не стоит оборачивать fixed-ом абсолютное, так и получается косяк.

HTML5
1
2
3
4
<body>
<div style="width:100%; height:50px; background: red; position:fixed;z-index: 2;top: 0;left: 0;"></div>
<div style="width: 100px;  height: 100px;  position: absolute;  left: 0;  top: 10px;  background: green;  z-index: 1;"></div>
</body>

@Sabio · 07.07.2014, 16:06

Странно, в мозилле мой код работает, а в вебките нет

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	07.07.2014, 16:06
	Странно, в мозилле мой код работает, а в вебките нет 0

Z-index не работает для вложенного элемента относительно родительского

Решение