Проблема с использованием z-index для двух относительно расположенных div

Я нашел много «почти» ответов на этот вопрос, но ничего не помогло моей конкретной проблеме...

У меня есть веб-страница с центрированной #content-wrapper шириной 1024 пикселя. Я бы хотел, чтобы за этой оболочкой располагался еще один div, который также располагался по центру и был немного шире. Причина в том, что у меня есть графика, которую я хочу запустить по левой стороне #content-wrapper, но мне нужна моя #content-wrapper чтобы оставаться шириной 1024 пикселей. Я не могу поместить этот рисунок на фон тела или абсолютно позиционировать его, потому что мне нужно, чтобы он перемещался вместе с #content-wrapper при изменении размера браузера.

Итак, моя проблема в том, что я относительно расположил как #content-wrapper, так и больший div, который называется #prints, и применил z-индексы к обоим. Однако, если я не применяю абсолютное позиционирование к #prints, он действует как плавающий элемент и прыгает выше моего #content-wrapper. Я попытался установить относительное положение тела, но это не помогает.

Мне нужно знать, есть ли способ сделать это, или я просто разочаровываю себя, пытаясь сделать что-то, что не сработает?

Моя (упрощенная) разметка ниже. HTML:

<body>

<div id="prints"></div>

<div id="content-wrapper">

<!-- Content here -->

</div>

</body>

CSS:

#content-wrapper {
width: 1088px;
min-height: 800px;
height: auto;
overflow: hidden;
margin: 0px auto 0px auto;
position: relative;
z-index: 99;
}

#prints {
width: 1212px;
position: relative;
z-index: -99;
margin: 0px auto 0px auto;
height: 881px;
background-image: url(images/bg-prints.png);
}

css z-index css-position
person Devonanne    schedule 11.05.2011    source источник
comment
В коде ваш #content-wrapper имеет ширину не 1024 пикселей, а 1088 пикселей. Также в #content-wrapper нет фонового изображения, но фоновое изображение есть в #prints. Вы хотите, чтобы изображение повторялось вертикально в левой части содержимого-обертки?   -  person Jawad    schedule 11.05.2011

Ответы (2)


arrow_upward
1
arrow_downward

Почему бы не сделать это так?

<div id="prints"> //the div behind
  <div id="left-side-graphic"> </div>
  <div id="content-wrapper"> </div>
</div>

и два элемента div внутри плавают влево, а размер «отпечатков» соответствует размеру, чтобы элементы div оставались встроенными.

person kei    schedule 11.05.2011
comment
я бы порекомендовал это, а затем перед закрытием отпечатков div добавьте чистый div, чтобы гарантировать, что отпечатки расширяют свою высоту до нижней части вашего контента. <div style="clear:both;"></div> - person Tim Joyce; 12.05.2011

arrow_upward
0
arrow_downward

Похоже, вы хотите что-то вроде этого. http://jsfiddle.net/PD6HK/ Вкладывая #content-wrapper внутрь #prints, вы выполняете следующее: 1. #prints расположен позади #content-wrapper 2. #prints немного шире, чем #content-wrapper 3. И #prints, и #content-wrapper центрируются и перемещаются вместе с окном браузера

Если бы это был я, я бы попробовал что-то вроде этого http://jsfiddle.net/PD6HK/1/, это звучит так, как будто он делает то же самое, что вы хотели выше, но без #prints . Конечно, содержимое не будет «точно» центрировано из-за отступов в #content-wrapper .

person IMI    schedule 11.05.2011