Shane Shane - 4 months ago 17
HTML Question

Show overflowing div over top an image

I have a div,

.top-level-object
, that overflows both of its containers,
.tl-object-container
and
.header
. My goal is to have
.top-level-object
visible and in front of all other elements in this scenario. I've tried z-indexing, but I couldn't get it to work. The image, for some reason is the only thing with this kind of behavior, because if you remove it, you will clearly see that the example works.

Side Note: I can't set
position:absolute;
on
.top-level-object
because other objects on the page depend on the space that it takes up for formatting.

What could I be missing?



.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>




Answer

By using position: relative; you can then adjust z-index - the difference being that the position is adjusted based upon the position of the element if it were static, as opposed to being "absolute" to a parent element.