2

CSSポジショニングでいくつかのテストを行っていたところ、奇妙な動作に気づきました。

絶対に配置されたコンテナdiv(赤)があるとしましょう。このdiv内に、コンテナに対して相対的な位置で2つのブロック(緑と青)を配置します。これらのブロックは上部に固定され、以下のようにブロック間の距離が50ピクセルである必要があります

ここに画像の説明を入力してください

top:0px; left:0px;だから私は彼を左上隅の近くに置くために、私が最初のものに使うべきだと思っています。間隔の幅に50を追加top:0px; left: 100px;し、2番目のブロックを取得します。(ここではjsfiddle )。

期待される動作を見る代わりに、私はこのポジショニングを取得します

ここに画像の説明を入力してください

2番目のブロックはtop、親コンテナではなく、最初のブロックを基準にしているようです。したがって、2番目のブロックの正しいCSSコードは、このフィドルtop: -50px; left: 100px;のようになります。

私がこれに気づいたのはこれが初めてではありません。場合によっては、leftそれが問題のあるプロパティであり、この場合はでしたtop

とにかく、私はこれらの問題を修正して正しい表示を得る方法を知っていますが、なぜそれが思ったように機能しないのかわかりません。

この絶対的/相対的なポジショニング全体について何かを誤解している可能性が非常に高いですが、それが何であるかはわかりません。

4

1 に答える 1

4

2番目のブロックには、最初のブロックや親コンテナーではなく、それ自体topleft相対的なものがあります。

何かを相対的に配置すると、そのオフセット値によって、相対的な配置を適用する前の元の位置から離れる方向にシフトされます。オフセットは、その兄弟、祖先、または子孫の位置に基づくことはありません(ただしauto、初期値である場合を除きます)。

于 2012-09-27T14:00:12.803 に答える