こんにちは!
UPSTARTSのSベンです!
今回は「位置」についての内容です。
こちらのhtmlにスタイルをあてていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body> <div id="box1"></div> <div id="box2"> <div id="box3"></div> </div> <p>ゴムゴム</p> <p>ヤミヤミ</p> <p>ゴロゴロ</p> <p>ピカピカ</p> <p>マグマグ</p> <p>ヒエヒエ</p> <p>グラグラ</p> <p>メラメラ</p> <p>ドクドク</p> <p>オペオペ</p> <p>イトイト</p> <p>カゲカゲ</p> <p>スナスナ</p> <p>ガスガス</p> <p>モクモク</p> <p>スケスケ</p> </body> |
position
位置を調整するには「position」プロパティを使います。
positionプロパティで指定できるのは、
static
relative
fixed
absolute
の4つになります。
ではそれぞれ見ていきましょう。
static
まずstaticですがこれが初期値になっていて、
位置を指定しないというものになります。
relative
位置ずらして表示したい時に使うのが、relativeになります。
1 2 3 4 5 6 7 8 |
#box1 { width: 100px; height: 50px; background: orange; position: relative; top: 10px; left: 10px; } |
topを10px、leftを10pxと指定していますので、
その位置にボックスが表示されるようなります。
fixed
次はfixedなんですが、
こちらはスクロールしても位置を固定したい時に使います。
配置はウィンドウの左上が基準になりますので、
先ほどのようにtopなどで指定した位置に配置されます。
1 2 3 4 5 6 7 8 |
#box1 { width: 100px; height: 50px; background: orange; position: fixed; top: 10px; left: 10px; } |
このようにfixedとすると、スクロールしても位置が固定されています。
absolute
最後にabsoluteなのですが、
これは親要素のポジションが何かによって基準点が変わってきます。
親要素がstaticの時は、ウィンドウの左上が基準点になります。
今回は3つのボックスを使い、見ていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { margin: 0; } #box1 { width: 100px; height: 50px; } #box2 { width: 100px; height: 50px; } #box3 { width: 50px; height: 25px; } #box1 { background: orange; } #box2 { background: green; position: static; } #box3 { background: yellow; position: absolute; top: 10px; left: 10px; } |
上記ではbox3にabsoluteを指定しました。
box3の親要素はbox2になるため、ウィンドウの左上が基準点になり、
box3はtopが10px、leftが10pxの位置に表示されます。
親要素box2の上に表示したい場合は、
box2をstatic以外に指定すればOKです。
先ほどのstaticをrelativeに変えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { margin: 0; } #box1 { width: 100px; height: 50px; } #box2 { width: 100px; height: 50px; } #box3 { width: 50px; height: 25px; } #box1 { background: orange; } #box2 { background: green; position: relative; } #box3 { background: yellow; position: absolute; top: 10px; left: 10px; } |
そうすると親要素であるbox2の左上を基準にした位置に表示することができます。
今回は「位置」について
positionプロパティをやっていきました。
次回は「重ね順」についてです。
ではまた次回!