Absolute positioning breaks the structure completely - html

Question

Here's the basic HTML code:
<div class="soc-cont">
<div class="soc-item-cont" style="background: blue;">
<div class="soc-item">
<img src="img/facebook.png" style="width: 100%; position: absolute; left: 0;">
</div>
</div>
</div>
And here's the CSS:
.soc-cont {
position: absolute;
height: 100%;
width: 20%;
display: inline-block;
right: 0;
text-align: center;
font-size: 0;
}
.soc-item-cont {
width: 25%;
height: 100%;
position: relative;
display: inline-block;
}
.soc-item-cont:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.soc-item {
vertical-align: middle;
width: 50%;
display: inline-block;
position: relative;
background: black;
}
What I'm trying to do is add position: absolute and left: 0 to to the img in order to take it out of the usual document flow to be able to overlap it with another picture later on. But instead of working as it should, I get this:
Instead of this:
Note: I have color-coded it a little to be more easily understood.
It also should be noted that there are, in fact, four .soc-items. However, since they are, right now, nothing more than copies to fill up the space, I didn't deem it necessary to post it here, as it would probably confuse you even more.
However, all it takes is changing position to absolute to instantly break the look.
Any ideas on how to fix this?

Answer 1

The reason for your problem is that, by changing it to position:absolute, you are taking it out of the normal flow but that causes your div(s) to collapse cause they now have no content (essentially). Once they do, you have to deal with the image being on the baseline and having white space, just like text. So it's the same as if you inserted or removed that content. Your layout "adjusts" to the content.