絶対配置を使って完全なアライメントで4つのボックをセットアップしました。私の理解は、これはあなたが基本的に各ブロックのx、y位置を上、左、親要素が原点であるように設定しているということです。私は期待どおりに働いていたし、素晴らしいことがうまくいったことに驚いた。私はIE 9のズームボタンを押すよりも、y座標はそこに維持されていますが、xコリダナートは親要素を過ぎても左にシフトしています。私は負の値を指定しなかった。ズーミングが絶対配置に影響するのはなぜですか?要素のセットを絶対位置に配置する方法は?
答えて
この権利を行うには、多くの方法があります...私がやったことは、xy座標平面を設定し、マージンや上と下の属性を使って要素を配置することです。これを行うために、親ディビジョンを相対位置に設定して、それを「原点」として登録し、4つの四角形divを絶対配置として設定します。これはうまくいく。私が何をしているのかは、あなたの絶対配置された要素の親divを非静的配置に設定しなければならないということです。
ズームは、これらの要素のサイズを変更しますが、位置は変更しません。しかし、私はそれを防ぐ方法を知らない、私はそれがブラウザによって引き起こされるので、あなたはそれに対して何もすることはできないと思う。
唯一の可能性はJavaScriptでサイズをチェックしている可能性がありますが、多分JSでこれを認識することは可能ですが、それは非常に難しいでしょう。とにかく、ズームしながら動作することは重要ですか?
テーブルを避けてはいけません。左から右へ4ブロック、上から下に並べて、テーブルで一番簡単です。あなたは浮動小数点の左と右とそのような迷惑メールでdivを使用することができますが、テーブル内のセルは一直線からずれることはありません。
原則として私はあなたに同意しますが、この場合私はテーブルが必要ではないと思います。また、 'float:left;の代わりに' display:inline-block; 'を使ったほうがずっと良い運がありました。 –
http://www.alistapart.com/articles/journey/ – Wex
現在、絶対配置要素は、<body>
タグの左/右の位置(常に0px/0px)に対して配置されています。
しかし、中央に配置されたレイアウトはmargin-left: auto; margin-right: auto;
であり、絶対配置された要素を完全に整列させたいとします。
ズームを使用してページを50%小さくするとします。これにより、left
の位置プロパティが50%減少し、margin:auto;
要素のwidth
が50%減少します(左右の余白がになり、幅の変更が何であってもになります)。
だから、小さいページをズームすると、中心要素大きなに余裕を作るが、それは絶対的な位置が小さいを調整します。
完全に整列させるには、要素に対して絶対配置された要素をmargin-left: auto;
で作成する必要があります。私はこれを行うだろう、あなたの具体的な例では
:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
ん意味をなさない?
PS:アップロードしたときにローカルで作業して壊れた理由は、そのページのデフォルトのズームレベルでページを表示していない可能性があります。
あなたの4つのブロックは高さと幅が同じである場合は、あなたがこれを行うことができます:
div.block { height: 200px; width: 400px; float: left; }
その後側だけで二つのブロックの側面を可能に容器に入れます。
例フィドル: http://jsfiddle.net/u5xVa/
- 1. 絶対要素を絶対位置に配置します。 IE
- 2. 相対位置指定された要素内でページを絶対的に配置する位置要素
- 3. イメージ要素の絶対位置を取得する方法は?
- 4. iframe内の絶対位置要素は?
- 5. 絶対位置DIVは、他の要素
- 6. 絶対配置要素を含むClearfix
- 7. 絶対要素配置のWYSIWYG
- 8. jquery絶対配置要素クリック
- 9. 相対位置と絶対位置の理解:内部divをコンテナの一番下に配置する方法
- 10. 位置:絶対
- 11. 位置が絶対配置された要素上の垂直スペース
- 12. OpenGL - GlVertex相対位置/絶対位置
- 13. JLabelsをJava GUI上の絶対位置に配置する方法
- 14. Xamarin.Forms - ページ上に要素を絶対に配置する方法は?
- 15. 絶対divを絶対divに配置する方法
- 16. 絶対位置と絶対位置のz-インデックス
- 17. 絶対位置での位置付け
- 18. 要素を絶対的に配置するが、別の要素の右側に配置する
- 19. 絶対位置または絶対パディング
- 20. ポジション:絶対;内部の動的位置:相対;要素
- 21. CSS絶対位置
- 22. は絶対位置、DIVS
- 23. 親の高さを子要素の相対位置と絶対位置に一致させる
- 24. HTML要素の絶対位置を計算できない
- 25. 絶対位置のGクロムでの要素の整列
- 26. JQuery - 要素の次元と絶対位置のコピー
- 27. 位置が絶対のiframe
- 28. 絶対位置のdivが
- 29. 画像の絶対位置?
- 30. %幅の要素で絶対位置が機能しない
問題を引き起こしているのはズームだけではありません。ブラウザウィンドウのサイズを変更すると、興味深い結果もいくつかあります。 –