如何补偿相对定位元素留下的空间？(没有搞乱)

Question

我有这三个要素:

现在,我的布局要求该元素.b(顺便说一句,如果它很重要,它们都是html <section>s)在某种程度上叠加在元素上.a.所以我决定申请position: relative它,然后使用它轻推它top: -50px.

这是怎么回事:

我成功地叠加了两个顶部元素,但现在我在.b和之间创建了一个不必要的50px空间.c.(他们应该粘在一起.)

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

最终我通过制作.b一个孩子的迂回方式解决了这个问题.a.这导致.a溢出上面.c,但后来我应用了一个魔法数量的量,margin-bottom以便.c向下推.

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

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

通过最好的方式我的意思是我想避免,如果可能的话:

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

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

Answer 1

而不是设置

top: -50px;

只需设置

margin-top: -50px;

这样你.c仍然坚持.b，并且你不必搞乱其他任何事情。

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