У меня есть следующие HTML и CSS, в которых положение #header id должно быть обязательно установлено на absolute:

<div class="main">
    <a href="www.website.com">
    <div id="header" class="other">
</div>


#header{
    padding-left: 250px; 
    position:absolute;
}

Этот код устанавливает div header поверх тега ссылки, и он становится (ссылка) недоступным для выбора.

У меня вопрос: какой CSS я должен применить к .main > a, чтобы он не попал ниже div header?

Я попробовал следующее, но это не сработало, поэтому приветствуются любые другие идеи:

.main > a {
    z-index:99999;  
}
1
user3132858 27 Окт 2015 в 21:05

2 ответа

Лучший ответ

z-index будет работать только с позиционированными элементами

z-index не будет применяться, если для элемента не указано позиционирование. Итак, я предлагаю вам немного изменить свой CSS, как показано ниже.

Т.е. новый CSS для .main > a будет похож на

.main > a {
    position:relative;
    z-index:99999;  
}

ОБНОВЛЕНИЕ

z-index не будет работать со статически позиционированными элементами .. см. Ответ здесь

1
Community 23 Май 2017 в 12:03

Атрибут z-index не будет действовать, если вы не установите для position значение relative, absolute или fixed.

.main > a {
    position: relative;
    z-index:99999;  
}
1
taxicala 27 Окт 2015 в 18:09