Отделение сверху Отделения, использующего z-индекс

Question

Отделение сверху Отделения, использующего z-индекс

У меня есть следующие отделения в моем 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);
}

В основном у меня есть Отделение, что с дисплеем фонового изображения, и у меня будет другое Отделение сверху этого с прозрачностью. Эти текущие работы кода, но моя проблема, когда я пытаюсь взять отделение содержания вниз от вершины.

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

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

9

html css margin z-index

задан Jack 22 January 2016 в 16:17

4 ответа

Другие вопросы по тегам:

html css margin z-index

Похожие вопросы:

score 10 · Answer 1

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

.bgimage { position: relative; }

.content { position: absolute; }

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

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

score 3 · Answer 2

Я не вижу необходимости в "z-index" es или "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" properties
Если для элемента class = "main" уже установлено фоновое изображение, большинство браузеров не поддерживают CSS3, необходимый для наложения нескольких фонов на один и тот же элемент

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

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

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

score 3 · Answer 3

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

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

score 1 · Answer 4

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

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