Показать переполненный div поверх изображения

У меня есть div, .top-level-object, который переполняет оба его контейнера, .tl-object-container и .header. Моя цель - показать .top-level-object и увидеть все остальные элементы в этом сценарии. Я пробовал z-индексирование, но я не мог заставить его работать. Изображение по какой-то причине является единственной вещью такого поведения, потому что, если вы ее удалите, вы ясно увидите, что пример работает.Показать переполненный div поверх изображения

Side Примечание: Я не могу установить position:absolute; на .top-level-object, потому что другие объекты на странице зависит от пространства, которое требуется для форматирования.

Что я могу пропустить?

.header { 
 
    height: 100px; 
 
    width: 100%; 
 
    overflow: visible; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.tl-object-container { 
 
    width: 400px; 
 
    height: 1px; 
 
    float: right; 
 
    overflow: visible; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.top-level-object { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.object-covering-tl-object { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 
.object-covering-tl-object img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 
.object-not-being-covered-by-tl-object { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
}

<div class="header"> 
 
    <div class="tl-object-container"> 
 
    <div class="top-level-object"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="object-covering-tl-object"> 
 
    <img src="http://www.jssor.com/img/home/01.jpg" alt="Random Image" /> 
 
</div> 
 
<div class="object-not-being-covered-by-tl-object"> 
 

 
</div>

источник

2016-07-20 ExcellentSP

'position: absolute;' необязательно требуется для использования 'z-index' - вы можете установить' position: relative; 'и отрегулировать' z-index'. – Toby

@Toby, я знаю. Это было просто примечание. Но я все еще не могу заставить его работать, если у вас нет рабочего примера ...? – ExcellentSP

Я извиняюсь. У меня возникли проблемы с визуализацией того, что вы пытаетесь достичь. Можете ли вы сказать мне, что работает и не работает здесь? Я добавил границы и изменил уровни непрозрачности, чтобы сделать его более ясным для меня. http://jsbin.com/yewajen/edit?html,css,output – Toby

С помощью position: relative;, то вы можете настроить z-index - разница в том, что положение регулируется на основе положения элемента, если это были статичными, а не быть «абсолютным» в родительский элемент.

источник

2016-07-20 22:37:45 Toby

Показать переполненный div поверх изображения

ответ

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