Форум Сайтостроение Веб-строительство

Почему не работает z-index?

12
M2
На сайте с 11.01.2011
Offline
341
mark2011
3250

Код CSS: 


#header

{

    width: 1266px;

    height: 195px;

    background-image: url('../images/header_background.png');

    margin: 0 auto;

    position: relative;

    z-index: 10;

}



#internal_cont

{

    width: 1600px;

    height: 1446px;

    background-image: url('../images/internal_background.jpg');

}



.menu

{

    position: relative;

    z-index: 5;

    width: 1200px;

    margin-left: 180px;

    

}



.menu_item

{

    width: 193px;

    height: 145px;

    position: relative;

    background-image: url('../images/int_menu_bg.png');

    margin: 0 auto;

    left: 100px;

    z-index: 5;

    float: left;

}

menu - общий блок с меню.

menu_item - каждый конкретный пункт меню, их 5.

Вроде в CSS всё верно (меню должно быть ПОД шапкой. Но почему-то не работает. Браузер Firefox.

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
Garin33
На сайте с 31.08.2009
Offline
169
Garin33
#1

Демо страницу хоть сделайте, где все посмотреть в целом можно.

Потому что Drupal - это круто.
K
На сайте с 14.10.2007
Online
238
ksylite
#2

mark2011, а html-то покажите как у вас там написано, может у вас там стили кривые, дивы вложенные или еще чего...

archibalds
На сайте с 10.03.2012
Offline
51
archibalds
#3

Без html трудно что то подсказать, вложите страницу html

Верстка макетов, интеграция с wordpress и modx, написание скриптов, опыт более 6 лет (/ru/forum/999087)
[Удален]
#4

Совершенно непонятно зачем z-index в #header... он и не работает... ))

wwwwww
На сайте с 29.04.2011
Offline
195
wwwwww
#5

http://htmlbook.ru/css/z-index

Видишь? Свободная подпись.
DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#6

задайте для #header position:relative и его z-index заработает...

show must go on !!!...
oux
На сайте с 07.02.2010
Offline
83
oux
#7

DiAksID, для header уже задан relative

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#8
oux:
DiAksID, для header уже задан relative

упс точно 😂 пардонтий. значит z-index работает нормально, но слой перекрывается (или что там не так как надо). надо наследования отследить в отладчике: для relative позиционирование слоёв идет не так как для absolute, не от корня а от предка... вроде бы ;)...

Яндекс.Метрика представила инструменты для Google: что лучше абсолютные Новая система индексирования сайтов
M2
На сайте с 11.01.2011
Offline
341
mark2011
#9

Сделал демо-страницу.

Вопрос остаётся открытым :)

PS Зелёный блок должен быть ПОД серым. А он сейчас НАД серым.

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#10
mark2011:
Сделал демо-страницу.
Вопрос остаётся открытым :)

PS Зелёный блок должен быть ПОД серым. А он сейчас НАД серым.

а что Вы хотели? зелёный и не должен быть под серым:

#header - position:relative; z-index 100;

.header_menu - потомок #header, position:relative; z-index не указан (по умолчанию выше предка);

.header_menu_item - потомок .header_menu, position: не указан (по умолчанию static); z-index 3 (не работает с static); а если бы указали relative, блок был бы внутри предка на 3-й "единице", что привело бы к такому же результату;

так что всё правильно.

по умолчанию, слой потомка всегда выше слоя предка.

что бы для position:relative потомок был ниже предка ему надо задать отрицательный z-index; причём прямой потомок с relative (!), если идут вложения с relative, то отрицательный z-index будет работать по отношению к ближайшему предку с relative.

для position:absolute другая байда - и z-index считается в абсолютных единицах, от корня.

Twitter запускает новый поисковый Как команда Google занимается Google рассказал подробнее о
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий