"位置：絶対"：</p> <pre><code><html> <body> <div id="outer"><div id="inner"></div></div> </body> <html> </code></pre> <p>とそのCSS：CSS

での使用は、HTML考えてみましょう私が理解から"位置：絶対"：</p> <pre><code><html> <body> <div id="outer"><div id="inner"></div></div> </body> <html> </code></pre> <p>とそのCSS：CSS

#inner { 
    height: 75px; 
    width: 75px; 
    background-color: red; 
    position: absolute; 
    margin-left: 20px; 
} 
#outer { 
    height: 1500px; 
    width: 150px; 
    background-color: green; 
    position:static; 
    margin-left: 100px; 
}

を、内側のdivが、HTMLから20ピクセルの左マージンがあるはずです外側のdivが静的な位置を持つので、外側のdivからではありません。しかし、内側divは常に外側divに対して相対的に位置しているようです。私はここで何が欠けていますか？

誰でも助けることができれば、ありがとう。

EDIT：

出典：www.codecademy.com

出典

2016-04-20 AarCee

'position：absolute'は最初の非静的配置要素に対して相対的に配置されます – scoots

position：absolute; （ビューポートに対して固定されたように配置されているのではなく）最も近い位置にある祖先を基準にして配置されます。ただし、絶対配置要素に配置された祖先がない場合は、ドキュメント本文を使用し、ページスクロールに合わせて移動します。このコードを#innerクラスに追加する：left：0px; – aghilpro

* "私が理解しているように、内側divはhtml要素から20px左余白を持つべきです" * - 何？それは意味をなさない。私はページの中央に要素があるとしますが、 'margin-left：20px; 'を追加すると、' '要素の端からではなく、中心から20px移動する必要があります。マージンは絶対配置要素に使用するプロパティではありません –

position: absolute;最も近い位置する祖先に対して通常の流れと位置自体から要素を削除します。存在しない場合は、ビューポートの寸法を取る最初の包含ブロックに位置します。 Reference。

それにもかかわらず、absolute要素については、常にそのようなあなたが観察さstatic祖先要素に対する位置決め相対として、そうでなければ、いくつかの奇妙な挙動を得ることができ、xとyの寸法（例えば、topとleft）を指定してください。

#inner { 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-left: 20px; 
 
} 
 
#outer { 
 
    height: 1500px; 
 
    width: 150px; 
 
    background-color: green; 
 
    margin-left: 100px; 
 
}

<html> 
 

 
<body> 
 
    <div id="outer"> 
 
    <div id="inner"></div> 
 
    </div> 
 
</body> 
 
<html>

出典

2016-04-20 05:34:34 timolawl

要素は、その（静的でない）配置された第一祖先要素に対して配置されている：topとleftが追加されたときに何が起こるかを見ます。したがって、内部divは、それを含む親要素（この場合は「外側」div）に基づいて配置されます。

出典

2016-04-20 05:37:01

"位置：絶対"：</p> <pre><code><html> <body> <div id="outer"><div id="inner"></div></div> </body> <html> </code></pre> <p>とそのCSS：CSS

答えて

関連する問題