Блог

Главная - Вопросы по программированию - Z-индекс, использующий элемент, расположенный относительно перекрывающегося изображения

Z-индекс, использующий элемент, расположенный относительно перекрывающегося изображения

#css #z-index #css-position

#css #z-индекс #css-позиция

Вопрос:

сайт: 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. Мой, пожалуйста, спросите, какой браузер вы используете? Я знаю, что некоторые старые браузеры IE не поддерживают z-index. Читать

2. IE поддерживает z-index, он просто сломан.

3. Не все IE, которые я знаю, IE 6 и 7 имеют некоторые проблемы с z-индексом. ЧИТАЙТЕ ЗДЕСЬ

Ответ №1:

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

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

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

Комментарии:

1. Согласно потоку документов, содержимое в настоящее время находится под заголовком, а раздел #right расположен относительно того, чтобы всплывать вверх поверх заголовка. Он просто появляется позади.

Метки: