LogoMark.png

CSS/Position

CSS|Position


CSS の position プロパティは、文書内での要素の配置方法を指定します。配置された要素の最終的な位置は、top, right, bottom, left の各プロパティによって決まります。これを使うと、ブラウザWindow上の特定の位置に要素を固定したり、任意のブロックを基準にして、その左上を原点とした座標で、要素の位置を指定することができます。

Position の仕様

positionプロパティーが使える値は、以下のとおりです。

一般に、top、bottom、left、rightというプロパティとセットで使います。

position : relative

対象となるブロックに以下のように書きます。

position:relative;
top: Ypx;
left: Xpx;

相対指定は「元の位置(何も指定しなかった場合に自動的に置かれる場所)に対する相対的なズレ」を指定するものですが、実際にはこれを単体で使うことはあまりありません。


position : absolute

絶対指定は「親要素に対する相対的な位置」を指定するもので、単体で用いた場合、親要素が特定できずにうまく位置指定ができません。そこで、一般に位置の基準となる親要素に対して position:relative; を記述することで、それを位置の基準と定めます。

この例では、containerの左上を原点(0,0)としたエリアの中に、
nav領域が(40,200)の位置を起点として、幅640px、高さ40pxのサイズで
固定的に表示されます。

position : absolute を用いたサイトのロゴの配置例

サイトのロゴは、ページ内での位置が固定されるものなので、
以下のように ID を利用して書くと簡単です。

position: fixed の事例

これを使うとブラウザ画面上の特定の位置に要素を固定することができます。
スクロールしても特定の場所から動かないメニューバーやボタンを表示したい場合に便利です。

html

<nav id="MenuButton"> ・・・・ </nav>

css

nav#MenuButton {
  position: fixed;
  top: 80px;
  right: 0px;
}


position: sticky の事例

例えば、このサイトでは、ヘッダー直下のメニュー(Navigation)の部分にこのスタイルが適用されています。上にスクロールすると、メニューだけがウィンドウトップに固定されるのがわかると思います。

以下、通常配置されたh1要素に対し、スクロールして最上部(top:0;)に到達したら、そこで固定するようにした事例です。

html

<h1 id="Sticky">Sample Site</h1>

css

h1#Sticky {
  position: sticky;
  top: 0;
}

参考




PAGES

GUIDE

TOOL

DATA

Last-modified: 2019-07-05 (金) 20:51:11