Каков наилучший способ перекрытия одного изображения с другим на HTML-странице для всех браузеров?

Question

у меня есть два пролета:

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>

как мне это сделать, где:

1. Верхнее изображение накладывается на нижнее изображение
2. Убедитесь, что верхние изображения отображаются перед нижним изображением) (а не за ним)
3. убедитесь, что выравнивание одинаково для всех браузеров

Answer 1

@ ооо; Вы можете присвоить position:relative своему диапазону, потому что z-index работает только на position absolute & relative прямо так:

CSS:

span{position:relative;display:block}
#top{z-index:1;}
#bottom{margin-top:-20px}

HTML:

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>

Answer 2

Обернуть элементы в контейнере;

<div id="image-container">
    <span id="top" ><img src="top.png" /></span>
    <span id="bottom" ><img src="bottom.png" /></span>
</div>

Установить CSS контейнера на position: relative;

Затем использовать;

#top {
  position: absolute;
  z-index: 2;
}
#bottom{
  position: absolute;
  z-index: 1;
}

Использование left и top для позиционирования ваших изображений.

Это должно дать наиболее согласованный результат во всех браузерах.Это должно быть особенно предпочтительным по сравнению с использованием полей для позиционирования изображений из-за потенциальной возможности восприимчивости элементов к ошибке с двойным полем, присутствующей в более ранних версиях IE.

Answer 3

span { position:relative;display:block; }
#bottom { z-index: 1;margin-top:-10px; }
#top { z-index: 2; }

Это должно немного перекрывать их. CSS действительно зависит от того, насколько они должны перекрываться ...