Question

我无法让div的顶级位置相对于之前的subling。

我有：

<style>
#container {position:absolute; top:0px; height:100%}
.question {position:relative;border: 1px double black;}
.question [scope=title] {position:relative; top:0px; color:black;font-size:28px; border-bottom: 1px double black;}
.question [scope=body] {position:relative; top:0px; color:black;font-size:18px; }
.question [scope=author] {position:relative;top:10px}
.question [scope=tags] {position:relative;top:0px}
</style>

然后

    <div ID="container">
        <div class="question">
            <div scope="title">A</div>
            <div scope="body">B</div>
            <div scope="author">C</b></div>
            <div scope="tags">D</div>
        </div>
</div>

我希望作者div比通常情况下低10px，并且以下div与之相对。但是，“标签”和“作者”重叠。

太刺激了，但我打赌有一个简单的答案。有什么帮助吗？

Answer 1

尝试在作者上设置margin-top：

.question [scope=author] {position:relative;margin-top:10px}

Answer 2

因为您的question元素计算到子元素的高度。所以它的高度与孩子的确切高度相匹配，但其中一个孩子（C）你将它向下推10px所以它与它下面的那个重叠。

只需更改author即可。

.question [scope=author] {position:relative;top:0px}

Answer 3

当一个元素具有position：relative offset时，该元素将以偏移量呈现，但其他元素将放置在布局流中，就好像该元素没有偏移量一样。换句话说，偏移发生在布局流程之外。它就像一个绝对定位的元素，在布局中有一个看不见的占位符占据空间。

由于您希望元素响应彼此的偏移量，因此建议使用不同的偏移机制，即在布局流程中发生的一种：填充或边距。

CSS位置相对充当绝对

3 个答案: