绝对定位完全打破了结构

Question

以下是基本的 HTML 代码：

<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>

这是 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;
}

我要做的是将position: absolute和left: 0添加到img，以便将其从通常的文档流程中删除，以便能够将其与另一个文档流程重叠图片后来。但不是按照应有的方式工作，我得到了这个：

而不是：

注意：我对它进行了颜色编码，以便更容易理解。
还应该注意的是，实际上有四个.soc-item s。但是，由于它们现在只是用于填补空间的副本，我认为没有必要在此处发布，因为它可能会让您更加困惑。

但是，只需将position更改为absolute即可立即打破外观。

有关如何解决此问题的任何想法？

Answer 1

你的问题的原因在于，通过将其更改为position：absolute，你将它从正常流程中取出但会导致你的div崩溃，因为它们现在没有内容（本质上）。一旦他们这样做，您必须处理基线上的图像并具有空白，就像文本一样。所以它与插入或删除该内容的方式相同。你的布局＆＃34;调整＆＃34;内容。