0

我无法使 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 与此相关。但是，“标签”和“作者”重叠。

如此恼人，但我敢打赌有一个简单的答案。有什么帮助吗？

4

3 回答 3

3

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

.question [scope=author] {position:relative;margin-top:10px}
于 2012-06-16T01:09:08.620 回答
1

因为您的question元素正在计算子元素的高度。所以它的高度与孩子的确切高度相匹配，但是其中一个孩子 (C) 将它向下推 10 像素，因此它与下面的那个重叠。

只需更改author，它就会起作用。

.question [scope=author] {position:relative;top:0px}
于 2012-06-16T01:01:00.103 回答
1

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

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

于 2012-06-16T01:19:54.457 回答