Размещение изображения за центрированным div

Question

Мой сайт имеет 900px div #content с центром в margin-left: auto и margin-right: auto. У меня есть изображение, которое мне нужно отобразить за div, которое будет частично перекрываться #content.

В настоящее время изображение настроено для отображения в виде блока, и я могу получить его там, где оно должно быть, но оно не позволяет #content рисовать поверх изображения. Я могу получить #content для отображения поверх изображения с помощью position: absolute, однако это не позволяет использовать авто по краям влево / по краям справа по центру.

Мое текущее позиционирование, которое возвращает его туда, где оно должно быть:

img#watermark  
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    padding-left: 900px;
}

#content просто должен появиться над водяным знаком.

Помощь с благодарностью.

Answer 1

HTML:

<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>

css:

div {
    margin:auto;
    width: 512px;
    height: 512px;
    background: rgba(0,0,0,.4);
    position: relative;
}
img {
    position: absolute;
    left: 50%;
    margin-left:-256px;
}

http://jsfiddle.net/Db2cw/

Answer 2

"Я могу получить #content для отображения поверх изображения с позицией: абсолютный, однако это предотвращает использование авто по краям влево / по краям справа по центру."

Что вам, возможно, понадобится сделать, эточтобы получить дополнительный div - назовите его, например, #contentWrapper и отцентрируйте его, используя поля слева и справа, установите положение относительно.Поместите div #content внутри div-оболочки и поместите его в абсолютное положение.Это позволит вам сделать #content выглядящим по центру.

Answer 3

решение состоит в том, чтобы иметь окружающий div на #content div, и этот окружающий div расположен абсолютно и с определенной шириной и высотой.

Пример:

html:

<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>

CSS:

#outter {
width: 1000px;
height: 300px;
position: relative;
}

#image {
width: 1000px;
height: 300px;
position: absolute;
}

#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}

#content {
margin: 0 auto;
width: 900px;
}

Пример здесь: http://jsfiddle.net/qwEhv/