40

出现的问题如下：在使用 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/

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

我该如何解决这个问题？

4

8 回答 8

56

您可以通过应用等于元素宽度或高度的负边距来简单地解决此问题。

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

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

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

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

剪切和粘贴 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;
    }

修改后的示例代码变为：

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

于 2012-12-05T11:19:11.090 回答
5

这是一个例子。在这种情况下，对象先向右移动，然后使用负的顶部值向上移动。消除其尾随边距空间需要添加一个相等的负边距值。

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;
于 2013-01-12T07:12:16.673 回答
3

你可以通过在 position:relative 之前给出 float:left 来解决这个问题。使用 margin-left, margin-top 属性而不是 top, left 也。

于 2015-04-20T07:57:50.490 回答
3

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

但请检查它是否隐藏了所需的内容。

于 2015-05-04T04:14:37.703 回答
0

将相对 elememt top 设置为父字体大小，如下代码：

玉模板中的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

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

    }

这对我有用！

于 2015-03-25T21:57:34.793 回答
-1

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

于 2014-12-04T00:46:03.283 回答
-1

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

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

解决方案是全球性的，而且更容易；它还用于两个单独的块来模拟和交换两个页面：所有问题都解决了定义一个区域的宽度和高度，只需设置它的样式=“溢出：隐藏；”

希望这能有所帮助。

于 2015-05-16T13:39:26.940 回答
-2

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

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

于 2015-03-02T18:47:05.740 回答