如何补偿相对定位的元素留下的空间？（不会弄得一团糟）答案

【问题标题】：How to compensate for space left by a relatively positioned element? (Without making a mess)如何补偿相对定位的元素留下的空间？（不会弄得一团糟）
【发布时间】：2015-12-12 02:34:17
【问题描述】：

我有这三个要素：

现在，我的布局要求元素 .b（顺便说一句，如果它很重要，它们都是 html <section>s）在某种程度上叠加在元素 .a 上。所以我决定将position: relative 应用到它，然后使用top: -50px 推动它。

会发生什么：

我成功叠加了两个顶部元素，但现在我在.b 和.c 之间创建了一个不必要的50px 空间。（它们应该粘在一起。）

我的第一个猜测是应用等效的margin-bottom: -50px，但这不起作用，由于某种原因我也不知道。

最终我通过使.b 成为.a 的孩子以迂回的方式解决了这个问题。这导致.a 溢出到.c 之上，但随后我对其应用了margin-bottom 的幻数，以便将.c 向下推。

当然，我对这个解决方案不满意，所以我在这里问。

什么是解决这个问题的最佳方法？

最好的方法我的意思是如果可能的话，我想避免：

创建附加的非语义标记
将相同的top: -50px 规则应用于页面上的所有后续元素
在我的 CSS 上使用任何类型的幻数。

我只是想在处理这个问题时学习最佳实践，因为我认为这将是一个我将来会遇到更多次的问题。

【问题讨论】：

只需删除 position: relative 并改用 margin-top: -50px 即可：)
什么。我是不是在思考。（谢谢！）

标签： html css layout position css-position

【解决方案1】：

而不是设置

top: -50px;

简单设置

margin-top: -50px;

这样你的.c 仍然会粘在.b 上，而你不必搞乱其他任何东西。

jsfiddle 在这里：http://jsfiddle.net/gyrgfqdx/

【讨论】：

谢谢！这很简单，我有点尴尬。无法解释我如何或为什么没有这样做，而不是无用的定位......

【解决方案2】：

所以，有几种方法可以做到这一点。

我的建议是在要溢出的元素上使用margin-top。其他所有内容都将正确渲染，并且只需正确定位一项。

视觉表现：

HTML

<div id="one">Item 1</div>
<div id="two">Item 2</div>
<div id="three">Item 3</div>

CSS

#one, #two, #three {
    position: relative;
    margin: 0 auto;
}
#one {
    width: 400px;
    height: 200px;
    background: #ABC;
}
#two {
    width: 200px;
    height: 100px;
    background: #CBA;
    margin-top: -50px;
}
#three {
    width: 400px;
    height: 300px;
    background: #BBB;
}

此处提供的示例：

http://jsfiddle.net/dp83o0vt/

【讨论】：