Как расположить ссылку на другой DIV, который имеет позицию: абсолютная

Question

У меня есть следующий 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; 
} 

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

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

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

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

Answer 1

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

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

т.е. новый CSS для .main > a будет как

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

UPDATE

z-index не будет работать со статически позиционируется elements..see ответ here

Answer 2

z-index атрибут не будет иметь эффекта, если вы не установите position в relative, absolute или fixed.

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