Блок div как ссылка

Допустим у нас есть блок <div> в котором у нас заголовок статьи в виде ссылки на статью. Кроме того, у нас есть ссылки для меток, которые ссылаются на архивы по этим меткам. Но мы хотим сделать весь div ссылкой на статью и еще, чтобы метки тоже были ссылками, но ссылались на архивы.

Обычно приходит в голову такая конструкция:

<a href="…"><div> … </div></a>

Но в таком случае все ссылки и весь блок будет ссылаться на статью или на тот адрес, который вы укажете в теге a.

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

1. Создайте свой блок, используя обычные методы CSS и HTML.
2. Где-то внутри поместите ссылку, которую вы хотите использовать по умолчанию, если пользователь нажмет на блок <div>. Обычно ссылку ставят перед закрывающим тегом </div>.
3. Внутри этой ссылки поместите пустой тег span (<span></span>). Но не <span />.
4. Блоку задайте в стилях position: relative.
5. Примените следующий CSS к пустому span:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

Теперь ссылка будет охватывать весь блок, а поскольку она находится внутри тега <a>, то это будет кликабельная ссылка.

И важно сделать следующие действия для других ссылок внутри div-а.

Задайте любым другим ссылкам внутри блока следующие параметры стиля:

{
position: relative;
z-index: 2;
}

Вообще вы должны сами указать подходящий z-index, который должен быть больше 1, чтобы поместить ссылки внутри блока поверх span по умолчанию.