Div поверх Div с использованием z-index

Question

У меня есть следующие div в моем HTML:

<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>

, который находится прямо внутри моего тела.

Со следующим CSS:

body {
    margin: 0;
    padding: 20px 0;
}
.content {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.content {
    position: relative;
    z-index: 1;
    border: #000 thin solid;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}
.bgimage {
    position: absolute;
    z-index: -1;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(bg1.jpg);
}

По сути, у меня есть Div с отображением фонового изображения, и у меня будет еще один Div с прозрачностью. Этот текущий код работает, но моя проблема в том, когда я пытаюсь перенести содержимое div сверху вниз.

Когда я добавляю margin-top: 100px , например, также приводит к снижению изображения. Я думал, что это не коснется его, если он не на том же Z-индекс? Почему добавление поля также сбивает bgimage div?

Я также пытался сделать div с классом содержимого позицией absolute и zindex, но тогда это не будет в центре. Как мне решить это?

Answer 1

Ваш CSS должен быть

.bgimage { position: relative; }

.content { position: absolute; }

, поэтому .content будет располагаться относительно .bgimage Ваш текущий CSS делает позицию .bgimage относительно документа.

см. ссылку по позиционированию CSS

Answer 2

z-index не имеет отношения к позиционированию: оно влияет только на порядок рендеринга ваших элементов. Position: relative говорит браузеру визуализировать элемент в том месте, где он должен быть, и смещает его на возможные координаты left, right, top или bottom Поэтому поля, отступы и т. Д. Все еще влияют на него.

Только position: absolute гарантирует независимость позиции.

Answer 3

Я не вижу необходимости в ваших кодах "z-index" или "position: absolute" - если только у вас нет других сложностей, которые вы нам не сообщили.

Для центрирования фона по классу DIV = "main":

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

«Центральная вершина» помещает центральную вершину фонового изображения на центральную вершину элемента, к которому он применяется. Вы можете применить

min-width:1024px;_width:1024px;

к тому же элементу - чтобы более узкое окно не скрывало края (это изменит способ визуализации элемента, если «область просмотра» уже, чем размеры фона).

Единственное, что может сделать ваш предварительно измененный код, это не может сделать мой измененный код:

• Обрезать фоновое изображение (если оно не изначально 1024px x 768px), используя свойства css "width" и "height"
• Если элемент class = "main" уже имеет фоновое изображение, большинство браузеров не поддерживают CSS3, необходимый для размещения нескольких фонов на одном элементе

Часть из того, что было сказано о "z-indexing" и свойстве "position" выше, была правильной, но не упомянула: вы взяли свой элемент class = "content" из потока ". Элементы-предки не будут расти при увеличении содержимого элемента class = "content". Это важное и фундаментальное различие между элементами "z-index" и элементами, которые остаются "в потоке".

Другие примечания:

• элементы с одним и тем же z-индексом складываются в соответствии с их порядком в HTML (позже HTML означает, что они нарисованы выше на экране)
• Для "z-index" требуется "position: (absolute | относительный)", "z-index: (действительное значение)" и IIRC "(верх | левый | нижний | правый): (действительное значение)" для взять элемент "из потока"

Answer 4

Абсолютное позиционирование CSS всегда выполняется "относительно" самого последнего предка, который имеет "position: относительный", в противном случае он по умолчанию использует тег body. Если включенный вами CSS - это все, что влияет на эти div, то ваш .content div будет позиционироваться относительно .main div, а ваш .bgImage будет позиционироваться на основе тега.

Если вы хотите, чтобы и .content, и .bgImage перемещались в режиме lockstep, вам нужно добавить «position :lative» в div.main.