Stop content due to overlay down due to match in bootstrap

Question

In the previous question, I was able to resolve the image in one line to overlap the content under it. However, I realized that now the text and other content that overlaps are actually reset and destroy the format. See an updated example here . In short:

<div class="container" role="main"> <div class="row" id="overlap"> </div> <div class="jumbotron"> <!-- this is being overlapped --> </div> </div> 

CSS

 @media (min-width: 992px) { #overlap { height: 70px; } } 

How can I make sure that the content in the .jumbotron div .jumbotron not forcibly disabled?

Answer 1

If you add the following CSS, the image should float above it without clicking the content.

 #overlap .thumbnail { position: absolute; z-index: 100; } 

Updated: http://www.bootply.com/120760

Answer 2

You can add the following styles below to make it work.

CSS

 .thumbnail{ position:absolute; z-index:100; } 

Demo