0

div #container2つの要素を並べて配置するこの単純なコードがあります。これらのそれぞれにdiv #child、親（）に対して配置したい子がありdiv #containerます。

<style>
.container {
    float:left;
    margin-right: 10px;
}

.child {
    position: absolute;
    left: 0.2ex;
}
</style>

<div class="container">a<br/>
    <div class="child">b</div>
</div>
<div class="container">c<br/>
    <div class="child">d</div>
</div>​

ただし、期待する結果ではなく、「d」は「c」の下に配置されていますが、少し右に押されています。代わりに、「d」は「b」の上に少し右に配置されています。言い換えると、絶対位置は、ページを含む要素ではなく、ページを基準にしてレンダリングされています。

  1. なぜそうなのですか？ここでの絶対測位について私は何を誤解しましたか？
  2. 期待していた動作をどのように取得できますか？

このjsFiddleを参照してください。

4

2 に答える 2

4

絶対的に配置された要素は、含まれているブロックのエッジに対して配置されます。これは、ではない最初の祖先として定義されposition: staticます。

祖先要素はどれもposition: staticそうではないので、ビューポートの初期位置を基準にしています。

本当に要素を絶対に配置したい場合はposition: relative、要素を設定します。.container

そうは言っても、代わりにこれを行う方が良いようです。

.child {
    margin-left: 0.2ex;
}
于 2012-10-23T16:11:12.890 に答える
2

親に対して子を配置するposition:relativeには、PARENT'Sスタイルに追加するだけです。そうすると、position：absoluteを持つすべての子は、親に対して絶対になります。

.container {
    float:left;
    margin-right: 10px;
    position:relative;
}
于 2012-10-23T16:09:25.720 に答える