Относительное позиционирование

[Choo]

Уже не первый раз сталкиваюсь с этой проблемой, но всё как-то старался обходить, теперь хочется вникнуть.

Вот есть у меня, предположим, такой код:

<div id="header">
<img src="background.gif" alt="" />
</div>

Мне нужно ПОВЕРХ этого изображения добавить ещё один слой. Делаю так:

<div id="header">
<div id="lay" style="position: relative; left: 700px; top: 25px;"><img src="image.gif" alt="" /></div>
<img src="background.gif" alt="" />
</div>

Сталкиваюсь с такой проблемой... Image.gif имеет высоту в 10 пикселей. Так вот, это изображение показывается ПОВЕРХ background.gif и, казалось бы, все довольны, но... Почему, спрашивается, в слое header образуется смещение сверху в эти самые 10 пикселей? Как этого избежать?

Спасибо.

P.S. Не пишите, пожалуйста, об использовании background-image. Меня интересует именно такой вариант, какой я описал.

[rash]

Если я правильно понял (код просмотрел бегло) вы просто относительно позиционируете одно изображение поверх другого.

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

[Choo]

Я это понял. Правда не был уверен в том, что это нормально. Как этого эффекта можно избежать? Может быть, что то вроде bottom: -10px у родителя? Конкретно этот вариант не подошёл.

[rash]

Это нормально, так и должно быть.

Можно этого избежать, воспользовавшись абсолютным позиционированием, или задав отрицательный отступ изображению, которое вы используете в качестве фона. margin-top: -10px;

[Vlad]

А для header position: absolute установлен?

[Choo]

Нет, но у меня нет возможности в данной вёрстке использовать такое позиционированние header. Но всё равно, большое спасибо за советы.

Суть понятна - вопрос решён.

[maleficmax]

У меня похожая проблема.

Есть изображение - назовем его Карта, - на которое наносятся пометки (города). Выглядит это вот так:

<div style="">
	<img src="map.jpg" />
</div>

<div style="position:relative; left:305px; top:-460px;">
	<img src="dot.png" alt="First Dot" />
</div>

<div style="position:relative; left:872px; top:-100px;">
	<img src="dot.png" alt="Second Dot" />
</div>

<div style="position:relative; left:-300px">
	<img src="way_1.png" alt="First way" />
</div>

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

После всего этого безобразия, естественно остаётся пробел, равный высоте трех элементов, у которых я сменил позицию.

Ну да и с этим справился, добавив вот этот обрамляющий див:

<div id="map" style="margin-bottom:-260px; margin-right: 872px;">
............
............
</div>

как видно, есть еще margin-right: 872px;, так вот его я вставил чтоб убрать огромный пустой блок справа, который я не совсем понимаю как образовался (хотя догадываюсь)...

Итак, вопрос. Судя по всему, этот выход не оптимален, так как ИЕ margin-right: 872px; воспринимать отказывается.

Где я ошибся?