CSS #15 位置

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「位置」についての内容です。

 

 

こちらのhtmlにスタイルをあてていきます。

 

 

position

位置を調整するには「position」プロパティを使います。

 

positionプロパティで指定できるのは、

static
relative
fixed
absolute

の4つになります。

 

 

ではそれぞれ見ていきましょう。

 

 

 

static

 

まずstaticですがこれが初期値になっていて、
位置を指定しないというものになります。

 

 

relative

位置ずらして表示したい時に使うのが、relativeになります。

 

 

topを10px、leftを10pxと指定していますので、
その位置にボックスが表示されるようなります。

 

 

fixed

次はfixedなんですが、
こちらはスクロールしても位置を固定したい時に使います。

 

配置はウィンドウの左上が基準になりますので、
先ほどのようにtopなどで指定した位置に配置されます。

 

 

このようにfixedとすると、スクロールしても位置が固定されています。

 

 

absolute

最後にabsoluteなのですが、
これは親要素のポジションが何かによって基準点が変わってきます。

 

親要素がstaticの時は、ウィンドウの左上が基準点になります。

 

 

今回は3つのボックスを使い、見ていきます。

 

上記ではbox3にabsoluteを指定しました。
box3の親要素はbox2になるため、ウィンドウの左上が基準点になり、

box3はtopが10px、leftが10pxの位置に表示されます。

 

 

親要素box2の上に表示したい場合は、
box2をstatic以外に指定すればOKです。

先ほどのstaticをrelativeに変えます。

 

そうすると親要素であるbox2の左上を基準にした位置に表示することができます。

 

 

 

 

 

 

 

今回は「位置」について
positionプロパティをやっていきました。

 

次回は「重ね順」についてです。

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る