コンテンツボックスは、画面の左上だったり、親要素の左上が
基準の位置です。postitionプロパティを使用すると、相対位置や
絶対位置を変更することができます。
static | デフォルト値。配置方法を指定しない。親要素の左上が基準の位置。 「top」「bottom」「left」「right」は適用されない。 |
relative | 相対位置。親要素の左上が基準の位置。 「top」「bottom」「left」「right」で起点を設定できる。 |
absolute | 絶対位置。親要素に「position:static」が設定されているか、 何も設定が無い場合は、画面の左上が基準の位置となる。 |
fixed | absoluteと同様に絶対位置で配置されるが、画面が スクロールしても同じ位置にボックスがそのまま。 |
実際にサンプルコード書いてみたので、
HTMLとCSSをコピーして実行してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
*{margin:0;padding:0;} #container{ width:640px; height:640px; background-color:#f0f0f0; margin:0 auto; } #parent{ width:300px; height:300px; background-color:aqua; } #child1{ width:100px; height:50px; background-color:blue; } #child2{ width:100px; height:100px; background-color:brown; } .relative{position:relative;} .absolute{position:absolute;} .top100{top:100px;} .left100{left:100px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <div id="parent"> <div id="child1" class="relative top100 left100"></div> <div id="child2" class="absolute top100 left100"></div> </div> </div> </div> </body> </html> |
実行すると、茶色の四角は、ブラウザから見て
上から100px、左から100pxに固定されています。
一方青い四角は、親要素の水色の四角に引きずられて
表示されているのがわかるかと思います。
ブラウザのサイズを変更しながら見ると分かりやすいかと
思います。