HTMLなぜこれらの2つの要素が直接重ね合わされて配置されていないのですか？

Question

preテキストブロックの上に直接別の要素をオーバーレイするためのHTMLコードを記述しようとしています。

問題も、最も単純な例が正しく整列するためにいないようです...

<div style="position:relative"> 
<pre style="position:absolute"> 
hello 
</pre> 
    <div style="position:absolute"> 
    world 
    </div> 
</div> 

あなたは出力hereを見ることができます。

div要素は、pre要素の上にレンダリングされます。なぜこうなった？

要素の配置に関する詳細は、hereを参照してください。

Answer 1

をmarginを入れpreタグは、デフォルトではmargin: 1em 0px;の余裕を持って。その後、まだ少しのギャップが残っています。これはフォントのためです。私の例では。 font-familyをオーバーライドして、親のfont-familyを継承し、要素が完全に整列するようにしました。もう一つは、同じその逆効果ではなくpreタグ `pre`タグ、これをチェックアウト（HTTPSのマージンところで

pre{ 
 
margin:0px; 
 
font-family:inherit; 
 
}

<div style="position:relative"> 
 
<pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute"> 
 
    world 
 
    </div> 
 
</div>

Answer 2

実際にはdiv要素はpre要素の上に描画されています。私たちはそれを見ることができません。私は、 "余白"のためにそれを視覚化するためにCSSのborder属性を追加しました。あなたは今、このように、それを少しシフトし、あなたが望む結果を得るために、いくつかのcssを追加することができ、言っ

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red;"> 
 
    world 
 
    </div> 
 
</div>

!!

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red; top: 7px"> 
 
    world 
 
    </div> 
 
</div>

役に立てば幸い！ また、preタグの上部にデフォルトのmarginがあることがわかりました。それを確認するにはこれをチェックしてください!!あなたはこれを無効にするためにゼロに余白を設定する必要がありますので

チェックこのFiddle

は、だからそれを取り除くために、簡単に、0にFiddle