Сделать ссылку на уровне ниже Z-индекс интерактивными

Question

Я хотел бы сделать якорь, который находится в нижней Z-индекс Clickable, вот скрипку:

http://jsfiddle.net/mjooh3gv/

Установка Z-индекса только для якорь (это отличается от partent div) не работает.

.underlay a { 
    position: absolute; 
    z-index: 5000; 
} 

Answer 1

В чем смысл расслоения двух DIVs друг на друга в первую очередь?

Если вы хотите расположить элементы на наружных краях контейнера, вы можете использовать несколько методов:

• postion: relative на контейнер и postition: absolute на детях, или
• float: left и float: right на детях (с очисткой контейнера), или
• использованием display: inline-block и width: 50% на детей, или
• макет <table> с двумя C olumns (Да, я знаю. Судиться меня), или
• с помощью display: table-row на контейнере и display: table-cell на детей, или
• display: flex см https://css-tricks.com/snippets/css/a-guide-to-flexbox/ и http://caniuse.com/#feat=flexbox

Последняя будет работать следующим образом:.

.container { 
 
    border: 5px inset red; 
 
    width: 300px; 
 
    padding: 5px; 
 
    display: flex; 
 
} 
 
.overlay { 
 
    margin-right: auto; 
 
} 
 
.underlay { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
    <div class="overlay"> 
 
     <a href="#1">Link 1</a> 
 
    </div> 
 
    <div class="underlay"> 
 
     <a href="#2">Link 2</a> 
 
    </div> 
 
</div>