position

さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。

static

.static {
  position: static;
}

static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

余分なプロパティを設定しなければ、relativeはstaticと同等だ。

</div>

top、right、bottom、leftプロパティを、relativeな要素に対して設定する。すると、元々の表示される予定だった位置からの相対位置に配置するように調整される。この調整により生じた左の隙間に、他のコンテンツが自動的に配置されることはない。

</div>

fixed

Hello! まだ私のことは気にしないでね。

</div>

fiexdな要素は、viewportに対する相対位置で配置される。つまり、ページがスクロールされても、いつでも同じ場所に配置されるという事だ。relativeと同様に、top、right、bottomやleftプロパティが使われる。

このページの右下の角にfixedな要素がある。既に君は気づいて、気づかないふりをしていたに違いない。だが、ここではそれに気づく許可をあげよう。これが適用しているCSSだ:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

fixedな要素は、relativeな要素と異なり、元々の表示位置からの調整により生じた隙間にも自動的に他のコンテンツが配置され得る。

ただし、モバイルブラウザは、fixedに対して、驚くほどイマイチなサポートしかしていない。もっと詳しい状況を知りたければここを参照しよう。

absolute

absoluteは最も扱いにくい。absoluteはfixedとほぼ同等である。だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置されるという点が異なる。位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。 "位置指定有効な"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。

以下は単純な例だ:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

これはrelativeな要素だ。もしこの要素がposition: static;だったら、absoluteな子要素はここから逃げ出すだろう。そして、子要素はdocumentのbodyからの相対位置で指定されるのだ。

これはabsoluteな要素だ。親要素からの相対位置で指定されている。

</div>

これは扱いづらい。だが、最高のCSSレイアウトを作るのには不可欠だ。次のページでは、もっと実用的な例でpositionを使ってみる。

前へ次へ