Размещение изображения за расположенным по центру div

#html #css

#HTML #css

Вопрос:

На моем сайте есть div размером 900 пикселей #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 просто должно появиться над водяным знаком.

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

1. вы пробовали играть с z-index?

2. Если содержимое должно быть сверху, не сработает ли установка изображения в качестве фона css?

3. К сожалению, Z-Index не сработал, и нет — на странице уже есть фон. В любом случае, приветствую.

Ответ №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/

1. если у вас есть другие элементы, влияющие на него, поиграйте с z-index (помните: это применимо только к position:relative or absolute ).

2. То, что вы предоставили, у меня не сработало, однако оставшиеся 50% — это то, что мне было нужно, чтобы получить это смещение там, где оно должно было быть. Приветствия. Вы не представляете, как долго это меня достает!

Ответ №2:

решение состоит в том, чтобы поместить окружающий 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 /

1. Спасибо за усилия, но это не работает. Я использовал это случайное изображение, которое я нашел, которое было меньше, чем у вас — jg.msdpt.k12.in.us/staff/Huckaby/splat.gif — и оно не отображалось справа — оно было выровнено по левому краю.

Ответ №3:

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

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