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

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

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

which is directly inside my body.

Со следующим 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 с прозрачностью. Этот текущий код работает, но моя проблема заключается в том, что я пытаюсь убрать блок содержимого сверху.

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

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


html css z-index margin
person Iacks    schedule 27.03.2010    source источник
comment
Можно ли установить .bgimage в положение сверху: 0? а также, почему бы не обернуть содержимое в bgimage?   -  person xandy    schedule 27.03.2010
comment
Установка его наверх: 20 ставит его на то, что я ищу! Но я думал, что мне это не понадобится, так как у меня есть прокладка для тела, которая, как я думал, позаботится об этом? Я отредактирую это в CSS.   -  person Iacks    schedule 27.03.2010

Ответы (4)


arrow_upward
11
arrow_downward

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

.bgimage { position: relative; }

.content { position: absolute; }

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

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

person pixeltocode    schedule 27.03.2010

arrow_upward
3
arrow_downward

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

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

person zneak    schedule 27.03.2010
comment
z-index не имеет отношения к позиционированию: он влияет только на порядок рендеринга ваших элементов. Чётко и по делу! - person Marc M.; 07.05.2014

arrow_upward
3
arrow_downward

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

Чтобы центрировать фон в DIV class="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;

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

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

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

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

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

  • элементы с одинаковым z-индексом располагаются в стопке в соответствии с их порядком в HTML (позже в HTML означает, что они рисуются выше на экране)
  • Для «z-индекса» требуется «позиция: (абсолютное | относительное)», «z-индекс: (действительное значение)» и IIRC «(верхнее | левое | нижнее | правое): (действительное значение)», чтобы принять элемент "из потока"
person David    schedule 27.03.2010

arrow_upward
1
arrow_downward

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

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

person Marc B    schedule 27.03.2010