css - 我使用的 div 越多，我得到的差距就越大

Question

我最近开始使用 div 在我的页面上的一个非常特定的位置安排艺术。在我得到我认为看起来正确的东西之后，我在所有 div 下得到了这个巨大的差距。似乎我使用的 div 越多，差距就越大。我只是希望那个差距消失。有专业人士对此有答案吗？

这是我的代码:

<div>
    <div style="position: relative; left: 12px; top: -20px; width: 970px; height: 0px;">
        <img class="alignnone size-full wp-image-1285 devanco_ep_curimg" alt="dsm-napkin-top-TEMP" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-napkin-full.png" width="1001" height="131" />
    </div>
    <div style="position: relative; left: 65px; top: -20px; width: 450px; height: 100px; padding: 20px;">
        <div>
            <h5>We’re a creative full service marketing firm in Northern New Jersey.</h5>
            <h6>Creative Branding | Advertising | PR | Website Design | SEO | World Class Client Support</h6>
        </div>
    </div>
</div>
&nbsp;
<div style="position: relative; left: 548px; top: -180px; width: 193px; height: 72px;">
    <a title="The DSM Group Is A Full Service Agency" href="http://thedsmgroup.com/jason/agency-2/">
        <img class="alignnone size-full wp-image-1412" alt="dsm-who-we-are-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-who-we-are-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;
&nbsp;
<div style="position: relative; left: 750px; top: -339px; width: 193px; height: 72px;">
    <a title="The Most Complete Marketing Agency In NJ" href="http://thedsmgroup.com/jason/services/">
        <img class="alignnone size-full wp-image-1411" alt="dsm-what-we-do-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-what-we-do-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;

Answer 1

这是因为像 top:-339px 这样的所有顶部调整。

相对定位元素并不能真正将其从文档流中移除，它只是使用它的静态空间并将其从那里移动。这意味着如果您有这样的元素...

.rel {
position:relative;
top:-100px;
}

...从技术上讲，它仍在填充其他空间，因此其他元素不会向上移动以填补空白。

Here's a jsFiddle to illustrate it.

请注意下图中的间隙是如何产生的。