position:absolute прикрепить к положенному месту

[z-0091]

Сайт axcay.net

Проблема в том, что слой с большими бутылями является большим пнг изображением. Имеющим ширину страницы и минимально необходимую для изображения высоту. Поставив слой с ним выше всего, поставив z-индекс 3, и выронив этот div по центру все было нормально. Но в последствии я заметил, что текст который попадает под этот див выделить нельзя. Я обрезал по ширине изображение, но теперь не могу прибить его к тому месту, которое нужно. Пока поставил отступ с лева в %. Но при приближении или отдалении страницы, слой соответственно плавает.

Прошу помощи. div #bottl

<div id="wrapper" class="gr shadow">
<div id="bottl"></div>
  <div id="header">

#bottl {
	position:absolute;
	background-image:url(../images/bottl2.png);
	z-index:3;
	background-repeat:no-repeat;
	width:960px;
	height:616px;
	margin: 0 auto;
	top: 0px;
	left:63%;
}

Я пробывал поставить на слой с текстом z-индекс больше чем стоит у картинки, но почему-то не получил ни какой реакции. Релатив тоже поставить нельзя, так как сразу рушится ширина слоя где меню...

[buddah]

Во-первых у тебя горизонтальный скролл, зачем такой большой блок для картинки?

Верстай с релатив. http://jsfiddle.net/xWaG3/

Если рушится - значит верстка плохая.

Я тоже вечно таким страдаю - ищу всякие извращения чтоб не начинать сначала. Но жизнь вечно показывает, что это неверное решение и рано или поздно вылезет боком - времени и сил больше потратишь.

Edited July 21, 2011 by buddah

[z-0091]

скролла раньше не было. он появился случайно в процессе различных проб.

добавил позитион релатив и з-индекс для всех вложенных р в блоке текста. проблема в принципе решилась...