Я нашел много «почти» ответов на этот вопрос, но ничего не помогло в решении моей конкретной проблемы ...
У меня есть веб-страница с центрированной # оберткой для содержимого, ширина которой составляет 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);
}