如何删除使用 CSS 相对定位元素后出现的空白

How to remove whitespace that appears after relative positioning an element with CSS

提问by Tschallacka

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

出现的问题如下：在使用 CSS 相对定位元素后，我得到了元素所在位置的空白......我不想要空白！

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

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.

正如您在示例中看到的，我想要的唯一空白是由 thetext 块引起的 50px 边距的空白；以及footerallowedwhitespaceinblue的间距（设为蓝色，因此可见）。问题是......现在空白太大了，因为“购买这个”div在相对定位后仍然占用空间。

How do I solve this?

我该如何解决这个问题？

回答by Tschallacka

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;

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

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

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

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

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

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

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

cut & paste css snippets:

剪切和粘贴 css 片段：

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

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

回答by user734063

Here is an example. In this case, the object was moved to the right and then up using a negative top value. Eliminating its trailing margin space required adding an equal negative-margin value.

这是一个例子。在这种情况下，对象被向右移动，然后使用负的最高值向上移动。消除其尾随保证金空间需要添加一个相等的负保证金值。

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;

回答by ibsenv

You can solve this problem by giving float:left before position:relative. Use margin-left, margin-top properties instead of top, left also.

您可以通过在 position:relative 之前提供 float:left 来解决这个问题。使用 margin-left, margin-top 属性代替 top, left 也。

回答by Iggy

If you are brave enough, you may put overflow:hidden;and a bottom negative marginon relatively positioned element, and it will remove the spacing leftover :) i.e. on responsive site.

如果你足够勇敢，你可以在相对定位的元素上放置overflow:hidden;和bottom negative margin，它会删除剩余的间距:) 即在响应式站点上。

But do check it doesn't hide a needed content.

但请检查它没有隐藏所需的内容。

回答by Ali mohammadi

set relative elememt top to parent font size like this code:

像这样的代码将相对元素顶部设置为父字体大小：

html in jade template:

jade 模板中的 html：

div.dialog(id='login')
        div.dialog-header
            span.title login
            a.dialog-close(href="")  X
            hr
        div.dialog-body
            p hello this is body
            hr
        div.dialog-footer
            p this is footer

and css:

和CSS：

    .dialog
    {
        height: 100%;
        position: absolute;
        top: -100%;
        right: 50%;
        left: 50%;
        bottom: 100%;
        border: 2px solid rgba(255, 255, 255,1);
        border-radius: 3px;
        font-size: 14px;

    }   
.dialog-body{
        position: relative;
        background-color: #F99;
        height: 80%;
        top: -14px;
    }
    .dialog-header{
        position: relative;
        height: 10%;
        background-color: #F9F9F9;

    }
    .dialog-footer{
        position: relative;
        height: 10%;
        top: -28px;
        background-color: #F9fdf9;

    }

this worked for me!

这对我有用！

回答by AstroTime

This did not work for me, having 4 separate interlocked by each other's relative positions. I could not get it working, even adding and repositioning each one:

这对我不起作用，有 4 个独立的相互关联的相对位置。我无法让它工作，甚至添加和重新定位每个：

Currently, this is optimized (see http://christ.eye-of-revelation.org/index.html2nd page) but in all cases they are used to highlight an area of the image according to the media or window size…

目前，这是优化的（参见http://christ.eye-of-revelation.org/index.html2nd page），但在所有情况下，它们都用于根据媒体或窗口大小突出显示图像区域……

The solution was global and much more easy; it was also used for two separate blocks to simulate and swap the two pages: all problems are solved defining in width and height a area, and just setting its style = "overflow:hidden;"

解决方案是全球性的，而且要容易得多；它也被用于两个独立的块来模拟和交换两个页面：所有问题都解决了定义一个区域的宽度和高度，只需设置它的样式 = "overflow:hidden;"

Hope this can help.

希望这能有所帮助。

回答by jnl

Set the outer div as "position: relative" the div you want to move as "position: absolute" and set the top and left values. this will position the item relative to the outer div (not the page). relative position leaves gaps. absolute does not.

将外部 div 设置为“位置：相对”，将要移动的 div 设置为“位置：绝对”，并设置顶部和左侧的值。这将相对于外部 div（而不是页面）定位项目。相对位置留下空白。绝对没有。

回答by user3480581

set height to 0: height:0px;.

设置高度为0： height:0px;。

Now this div can be placed anywhere.

现在这个 div 可以放在任何地方。