Question

我有以下三个要素：

https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/ImplementingaContainerViewController.html#//apple_ref/doc/uid/TP40007457-CH11-SW1

现在，我的布局强制要求元素.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上使用任何类型的幻数。

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

Answer 1

所以，有几种方法可以实现这一目标。

我的建议是在要溢出的元素上使用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/

Answer 2

而不是设置

top: -50px;

只需设置

即可

margin-top: -50px;

这样你的.c仍然坚持.b，你不必乱用其他任何东西。

jsfiddle here：http://jsfiddle.net/gyrgfqdx/

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

2 个答案:

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

2 个答案:

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