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

概述我有这三个要素： 现在,我的布局要求元素.b(顺便说一句,如果它很重要,它们都是html< section> s)有点叠加在元素上.因此我决定应用位置：相对于它,然后使用top：-50px轻推它. 这是怎么回事： 我成功地叠加了两个顶部元素,但现在我在.b和.c之间创建了一个不必要的50px空间. (他们应该粘在一起.) 我的第一个猜测是应用一个等效的保证金底部：-50px,但这不起作用,由于某种 我有这三个要素：

现在,我的布局要求元素.b(顺便说一句,如果它很重要,它们都是HTML< section> s)有点叠加在元素上.因此我决定应用位置：相对于它,然后使用top：-50px轻推它.

这是怎么回事：

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

我的第一个猜测是应用一个等效的保证金底部：-50px,但这不起作用,由于某种原因我也不知道.

最终我通过使.b成为.a的孩子,以迂回的方式解决了这个问题.这导致.a溢出.c以上,但随后我向它应用了一个神奇数量的margin-bottom,以便将.c向下推.

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

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

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

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

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

解决方法 所以,有几种方法可以做到这一点.

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

总结

以上是内存溢出为你收集整理的html – 如何补偿相对定位元素留下的空间？ (没有搞乱)全部内容，希望文章能够帮你解决html – 如何补偿相对定位元素留下的空间？ (没有搞乱)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。