Как разместить div1 ниже div2 и сохранить прозрачный фон div1? - PullRequest
Новая
       301

Как разместить div1 ниже div2 и сохранить прозрачный фон div1?

1 голос
/ 26 сентября 2011 
<div id="header"> Header content </div>
<div id="content"> Content </div>

#header {
    background-image: url("/Content/Images/bg.png");
    background-repeat: repeat-x;
    float: left;
    height: 45px;
    margin: 0;
    width: 960px;
    z-index: 10;
}

#content {
    background-image: url("/Content/Images/separator_shadow_both.png");
    background-repeat: repeat-y;
    float: left;
    margin: -4px 0 0;
    padding: 0 10px;
    width: 940px;
    z-index: 9;
}

У заголовка div есть фон, высота которого составляет 45 пикселей - сплошной цвет 41 пиксель, а нижняя 4 пикселя - прозрачная тень.Я хочу, чтобы эта тень отображалась над содержимым.Я поместил контент div margin top -4px для сканирования под заголовком div, но он появляется выше, а не под div1.z-индексы установлены по-разному ... Это проблема z-индекса или фон заголовка не может быть расположен над содержимым?

Спасибо

1 Ответ

3 голосов
/ 26 сентября 2011

Свойство z-index относится только к позиционированным элементам. Решение: Установить position: relative на #header.Вам даже не нужен z-index, поскольку позиционированные элементы всегда отображаются поверх непозиционированных.

...