你可以通过应用一个等于元素的宽度或高度的负边距来简单解决这个问题。 / p>

对于位于顶部的高度为100px的元素，您将应用margin-bottom：-100px;

对于位于底部的高度为100px的元素，您将应用margin-top：-100px;

对于位于左侧的宽度为100px的元素您将应用margin-right：-100px;

对于位于右侧的100px宽的元素，您将应用margin-left：-100px;

cut&粘贴css片段：

  .top 
 {
 postion： 
 top：-100px; 
 height：25px; 
 margin-bottom：-25px; 
} 
 .bottom 
 {
 postion：relative; 
 top：100px; 
 height：25px; 
 margin-top：-25px; 
} 
 .left 
 {
 postion：relative; 
 left：-100px; 
 width：25px; 
 margin-right：-25px; 
} 
 .right 
 {
 postion：relative; 
 left：100px; 
 width：25px; 
 margin-left：-25px; 
} 
 

然后重做的示例代码变为：

  .thetext {width：400px;背景：黄色; border：1px broken red; margin：50px; padding：5px; font-weight：bold;}。whiteblob {position：relative; top：-140px; left：70px; width：200px; height：50px; margin-bottom：-50px; border：4px solid green;背景：白色; font-size：2.5em;红色; } .footerallowedwhitespaceinblue {height：10px; background-color：blue;}。footer {background-color：gray; height：200px;}  

 < div class = >< script type =text / javascript> for（c = 0; c  / pre> 

http： //jsfiddle.net/qqXQn/1/

I've been looking far and wide for this problem and finally found the solution on some obscure forum on page #10 of google. The solution is in the answer

The problem occurs is the following: After relative positioning an element with CSS I get a whitespace of where the element was... I don't want the whitespace!

    .thetext 
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;
        
    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

JSFiddle: http://jsfiddle.net/qqXQn/

As you can see in the example, the only whitespace I want is the whitespace caused by the thetext block by the margin of 50px; and the spacing by the footerallowedwhitespaceinblue(made blue so it's visible). The problem is... the whitespace is too big now because the "buy this" div still takes up space after it's been relatively positioned.

How do I solve this?

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext 
{
    width:400px;
    background:yellow;
    border: 1px dashed red;
    margin:50px;
    padding:5px;
    font-weight:bold;
}
.whiteblob
{
    position:relative;
    top:-140px;
    left:70px;
    width:200px;
    height:50px;
    margin-bottom:-50px;
    border: 4px solid green;
    background:white;
    font-size:2.5em;
    color:red;
    
}
.footerallowedwhitespaceinblue
{
    height:10px;
    background-color:blue;
}
.footer
{
    background-color:grey;
    height:200px;
}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
</div>
<div class="whiteblob">
    &nbsp;buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>

http://jsfiddle.net/qqXQn/1/