Изображение перекрывается над div

iam сталкивается с небольшой проблемой с перекрытием.Изображение перекрывается над div

Рассмотрим этот фрагмент кода HTML

<html> 
    <head> 
    div 
    { 
     width:100%; 
     height:100px; 
    } 
    img 
    { 
     width:100%; 
    } 
    #div2 
    { 
     margin-top:-100px; 
    } 
    </head> 
    <body> 
    <div id="div1"> 
     <img src=""/> 
    </div> 
    <div id="div2"> 
     some text 
    </div> 
    </body> 
</html>

Я хочу, чтобы перекрывать div2 над див1. Поскольку код будет перекрываться, поскольку margin-top div2 равен высоте div1. Моя проблема заключается в том, что изображение перекрывает div2. В чем причина такого поведения?

И я не хочу, чтобы позиция была абсолютной для элементов, так как этот код нарушает макет страницы, если используется абсолютная позиция.

Спасибо.

источник

2014-10-09 PRASANTH

'z-index' является собственностью/термином, который вам нужно посмотреть. –

ОК, я пробовал с предоставлением z-index 10 для div1 и 20 для div2, пока он не работает. – PRASANTH

z-index работает только на позиционированных элементах –

Check this jsfiddle. Как упоминалось выше, нужно позиционировать элементы.

div 
{ 
    width:100%; 
    height:100px; 
} 
img 
{ 
    width:100%; 
} 
#div1 { 
z-index: 10; 
position: relative; 
} 

#div2 
{ 
position: relative; 
margin-top:-100px; 
border: 1px solid #f00; 
z-index: 20; 
color: #fff; 
font-weight: bold; 
}

источник

2014-10-09 14:44:49 vaso123

Спасибо, человек. Это было глупо с моей стороны, и это решило мою проблему. Думаю, что я пропустил позицию относительного отношения к стилю. – PRASANTH

Изображение перекрывается над div

ответ

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