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>

author 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要素は子要素の高さまで計算しているからです。そのため、その高さは子の正確な高さと一致しますが、子の1つ（C）が10px押し下げているため、その下の子と重なっています。

変更するだけauthorで機能します。

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

1つの要素にposition：relativeオフセットがある場合、その要素はオフセットでレンダリングされますが、他の要素は、要素にオフセットがないかのようにレイアウトフローに配置されます。つまり、オフセットはレイアウトフローの外側で発生します。これは、レイアウト内でスペースを占める非表示のプレースホルダーを持つ絶対位置の要素のようなものです。

要素が互いのオフセットに応答するようにしたいので、オフセットに別のメカニズムを使用することをお勧めします。これは、レイアウトフロー内で発生するパディングまたはマージンです。

于 2012-06-16T01:19:54.457 に答える