Z-индекс с использованием элемента, расположенного относительно перекрывающегося изображения - PullRequest
1 голос
/ 21 октября 2011

сайт: forus-group.com

Я пытаюсь расположить правильную навигацию так, чтобы она перекрывала изображения скользящего заголовка. Независимо от того, какой высокий z-индекс я ему даю, он не будет перекрывать изображения, у родительских разделов которых z-индекс равен 3. Оба элемента грубо расположены относительно упрощенного z-индекса.

Даже когда я пытаюсь дать изображениям отрицательный z-индекс, они все равно перекрывают правый столбец. Соответствующий CSS ниже:

#right {
     width: 275px;
     position: relative;
     bottom: 175px;
     z-index: 50;
}

#tophead .cycleitem img {
     position: relative;
     z-index: 1;    
}

Все остальные элементы (в шапке) отображаются корректно, когда дан z-индекс 50. Заранее спасибо.

РЕДАКТИРОВАТЬ: Сайт теперь возвращается в нерабочее состояние. Ошибка возникла при попытке исправить IE 7 и ниже, но теперь появляется в современных браузерах. У меня есть заголовок на полную высоту, с содержанием ниже. Затем я пытаюсь расположить правую колонку относительно:

position: relative;
bottom: 175px;
z-index: 150;

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

1 Ответ

0 голосов
/ 21 октября 2011

Это потому, что меню на самом деле находится в другом разделе документа, чем заголовок:

<header id="tophead">
    header image here
</head>
<section id="content">
    sidebar menu here
</section>

Если вы хотите, чтобы меню перекрывало изображение заголовка, вам придется реструктурировать документ. Одним из методов взлома было бы сделать top: -313px боковой панели, которая соответствует высоте заголовка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...