Show div on top of a img container

Question

I'm trying to make a white div on top of a img.

I have tried with position absolute and relative but don't make it. I'm stuck.

The box is showing under the img container.

What am I doing wrong? :)

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  text-align: center;
  
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
 
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
    
}

 <div class="img_container"> 
    <div class="the_img"> 
     <?php echo get_the_post_thumbnail( get_the_ID(), 'large'); ?>
       <div class="container_white">¨
    </div>
    </div>
    </div>
     <div class="fixfloat"></div>

Close the `the_img` div **before** the `container_white` div. — Paulie_D, Oct 05 '18 at 14:49
https://stackoverflow.com/questions/403478/how-to-overlay-images?noredirect=1&lq=1 — Paulie_D, Oct 05 '18 at 14:50

theoretisch · Accepted Answer · 2018-10-05T18:35:04.657

The only thing the get_the_post_thumbnail does is inserting an image-element into your code. For example, it will generate something like this:

<img width="" height="" src="" class="" alt="" large="" srcset="" sizes="">

Of course filled with your custom values. For better demonstration purposes I replaced the php function call by the returned img tag.

If you want to place your div relative to its parent:

Your parent should be position: relative

Your children should be postion: absolute

In your case the the_img element is the parent. Both children, the img and the container_white have to be absolute to remove them from the normal document flow. See the code snipped.

.img_container {
  margin-left: 40px;
  margin-right: 40px;
  background-size: cover;
  background-position: center center;
  position: relative;
  /**text-align: center;**/
}


.img_container .the_img img {
   width: 100%;
   height: 420px;
   position: absolute;
}

.img_container .the_img .container_white{
    width: 900px;
    height: 50px;  
    margin: 0 auto;
    background: white;
    position:absolute;
}

.the_img{
  position: relative;
}

<div class="img_container"> 
  <div class="the_img"> 
     <img src="https://images.pexels.com/photos/386148/pexels-photo-386148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="beach">
     <div class="container_white"></div>
  </div>
</div>
<div class="fixfloat"></div>

So the only thing you have to do is to

make the_img to relative
make img to absolute

NOTE: I removed the text-align: center from the img_container just for better displaying.

Show div on top of a img container

1 Answers1