Div на вершине Div с использованием Z-индекс

У меня есть следующие дивы в моем HTML:Div на вершине Div с использованием Z-индекс

<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-index? Почему добавление маржи также приводит к отключению div bgimage?

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

источник

2010-03-27 Iacks

Можно ли установить .bgimage в положение сверху: 0? а также, почему бы не обернуть содержимое внутри bgimage? – xandy

Установка его на верх: 20 ставит его на то, что я ищу! Но я думал, что мне это не понадобится, поскольку у меня есть прокладка для тела, которая, как я думал, позаботится об этом? Я отредактирую это в CSS. – Iacks

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

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

источник

2010-03-27 01:59:53 zneak

«z-index не имеет никакого отношения к позиционированию: он влияет только на порядок рендеринга ваших элементов« Clear and the Point! –

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

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

источник

2010-03-27 02:47:50

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

.bgimage { position: relative; } 

.content { position: absolute; }

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

посмотреть link на позиционирование CSS

источник

2010-03-27 03:26:08 pixeltocode

Я не вижу никакой необходимости в «г-индекс» эс или «позицию: абсолютная» в коде вообще - если у вас нет других осложнений, которые вы не выявили нам ,

Для центрирования фона на классе DIV = «основной»:

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;

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

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

Crop фоновое изображение (если он изначально не 1024px х 768px) с помощью CSS «ширина» и «высота» свойство
Если = «главный» элемент класса уже имеет набор фонового изображения, большинство браузеров не поддерживают CSS3 требуется укладывать несколько фонов на одном элементе

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

Другие побочные ноты:

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

источник

2010-03-27 05:12:18 David

Div на вершине Div с использованием Z-индекс

ответ

Смежные вопросы