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
。
とにかく、私はこれらの問題を修正して正しい表示を得る方法を知っていますが、なぜそれが思ったように機能しないのかわかりません。
この絶対的/相対的なポジショニング全体について何かを誤解している可能性が非常に高いですが、それが何であるかはわかりません。