CODEWITHSUNDEEP
htmlcss
ExcellentSP
ExcellentSP

Reputation: 1619

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>

Upvotes: 0

Views: 87

Answers (1)

Toby
Toby

Reputation: 13385

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.

Upvotes: 1

Related Questions