Show div on top of a img container - html

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>

Answer 1

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.