Как можно наложить изображения с относительным положением?

Question

Мне нужно, чтобы мои изображения были относительно, чтобы они были в нужном месте в div, но я не могу заставить работать z-index!Это мой HTML-код:

<img src="images/banners/banner1.jpg" class="banner" /><br /><br />
<div id="social_cont">
    <div id="social">
    Hello!!
    </div>
</div>

, и это мой CSS:

.banner {
    position: relative;
    z-index: 0;
}

#social_cont {
    text-align: center;
    z-index: 10;
}
#social {
    position: relative;
    z-index: 10;
}

На данный момент все, что я получаю, это баннер, а затем текст под ним, почему это

Answer 1

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

Что z-index делает, так это решает, какой элемент будет"сверху" , если несколько элементов вынуждены занимать одно и то же место при рендеринге .По умолчанию (если только вы не используете CSS для изменения положения некоторых элементов), этого никогда не произойдет.

В вашем вопросе недостаточно информации, чтобы дать вам хороший ответ в данный момент.Если вы просто хотите, чтобы div s над баннером, почему бы вам просто не переместить их в HTML, чтобы они отображались перед баннером?

Обновление :

Похоже, вы хотите, чтобы баннер действовал как фон для вашего текста.Вот для чего нужен CSS background:

<div id="social_cont" style="background: url(images/banners/banner1.jpg)">
    <div id="social">Hello!!</div>
</div>

Вы можете использовать различные CSS свойства, связанные с фоном , чтобы настроить выравнивания и так, как вам хочется.

Answer 2

Элемент с позицией: относительный сохраняет свою позицию и также влияет на все остальные следующие элементы.Вот почему ваш div не будет перекрывать изображение, просто используя z-index.Вам все еще нужно будет расположить элемент div, например: top:-100px, где сумма будет высотой изображения.Лучший способ - использовать ответ Джонс.Установите изображение в качестве фонового изображения для элемента.

Answer 3

@ Джон прав. Я верю, что ты хочешь что-то подобное.

http://jsfiddle.net/2EDnj/4/