Не могу понять z-index

Я думаю, вы хотите, чтобы ваш .countdown div фактически находился в том же месте, что и .header_top и располагался под ним? Если это так, то вам нужно полностью позиционировать .header_top:

.header_top {
    left:0px;
    top:0px;
    position:absolute; //here the only change in your code
    z-index:2;
    width:1024px;
    height:80px;
    background-image:url(../img/top.png);
}
(...)

Обратите внимание, что .header_top будет располагаться относительно ближайшего родителя, который позиционируется как relative/absolute/fixed. Если таковых нет, то позиция .header_top будет относиться к body.

Я мог ошибаться здесь, но вы могли бы сделать:

<div id="countdown">
<div class="header_top">
                <div class="links">
                        <div class="link">
                        <img src="img/tweet.png" >
                        </div>
                        <div class="link">
                        <img src="img/face.png" >
                        </div>
                        <div class="link">
                        <img src="img/youtube.png" >
                        </div>
                        <div class="link">
                        <img src="img/streg.png" >
                        </div>
                        <div class="link">
                        <img src="img/faq.png" >
                        </div>
                        <div class="link">
                        <img src="img/message.png" >
                        </div>
                        <div class="link">'enter code here'
                        <img src="img/info.png" >
                        </div>
                     </div>
                 </div>
             <div>

Таким образом, вы можете соответствующим образом настроить обратный отсчет и включить в него другие div.

z-index - это свойство CSS, которое позволяет вам устанавливать порядок стека для определенных элементов. Элемент с большим порядком стека всегда будет перед одним с более низким. z-index был введен в css2, он не был унаследован, а его значение по умолчанию - auto. Синтаксисом javascript для установки z-index является object.style.zIndex = "1". Это несколько небольших советов и знаний, связанных с свойством z-index.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

Измените z-index от -1 до 1 в этом небольшом тесте. Вы увидите, как он работает правильно. Вы можете взять их код и попытаться исправить свою проблему. Надеюсь, это помогло.

Проблема в настройке позиции у вас есть. Установка его в относительный, означает, что он относительный и частичный для других div в области. Абсолютный означает, что вы решили его положение и независимо от того, какое количество divs установлено в верх: 0 слева: 0 с положением: абсолютное.

Позиция относительная, вероятно, не то, что вы ищете. Позиция: Относительное положение элемента относительно того, каково его положение, как обычно. Поэтому, по сути, вы просто берете то, что было бы, и перемещаете его.

С другой стороны, положение абсолютное с точки зрения его предыдущего предка.

http://www.w3schools.com/cssref/pr_class_position.asp

Вам также нужны более высокие значения z-индекса для элементов, которые вы хотите отображать над другими элементами.