Почему не задаётся жёлтый фон для ссылки?

Question

[Bestolkovy]

Добрый день!

Почему не задаётся жёлтый фон для ссылки? Ведь она находится над изображением?

<li>
  <a href="#">
    <img src="http://www.jqueryscript.net/demo/Lightweight-Responsive-Content-Slider-Plugin-with-jQuery-CSS3-lightslider/img/1.jpg">
  </a>
</li>

li {
  position: relative;
  width: 460px;
  height: 300px;
  z-index: 1;
}

a {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background: yellow;
  z-index: 2;
}

Answer 1

[HamSter]

Если бы <a href=""> была внутри <img> (что невозможно), то да было бы "выше".

А вот так:

<ul>
  <li>
    <a href="#"></a>
    <img src="http://www.jqueryscript.net/demo/Lightweight-Responsive-Content-Slider-Plugin-with-jQuery-CSS3-lightslider/img/1.jpg">    
  </li>
</ul>

Ссылка будет поверх изображения.

Answer 2

[Андрей Б.]

Ответ тут: https://habrahabr.ru/post/166435/ и как дополнение к пониманию https://habrahabr.ru/post/225721/