【CSS】 position - PCゲーマーのWebデザイン備忘録

positionを使って、HTML内でレイヤーのような構造を作る事ができます。

posisionの書き方

positionはabsolute（絶対的な）を指定した上で、ブラウザの左上からの距離を指定する。

CSS

f:id:game-web-design:20140910115857p:plain

#wrapper {
  width: 760px; /* レイアウト全体の幅を指定 */
  overflow: hidden;
}
#primary {
  position: absolute; /* 値にabsoluteを指定 */
  left: 10px; /* 左方向からの配置位置を指定 */
  top: 10px; /* 上方向からの配置位置を指定 */
  width: 550px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #C7D5ED;
}
#secondary {
  position: absolute; /* 値にabsoluteを指定 */
  left: 570px; /* 左方向からの配置位置を指定 */
  top: 10px; /* 上方向からの配置位置を指定 */
  width: 200px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #F9CFBA;
}

#primaryの位置を変えてみる。

#primaryのleftの値を50pxにすると、#secondaryに飲み込まれる。（後に書いてある値のほうが強いので）
f:id:game-web-design:20140910115912p:plain

#primaryと#secondaryにz-indexを入れてレイヤー化します。指定は100ずつ。
#primaryには1000、#secondaryには100を指定します。
f:id:game-web-design:20140910115947p:plain

絶対配置するボックスの親ボックスを作る

positionをrelative（相対的な）に指定すると、親であるhtmlの代わりに指定したボックスが親になります。

CSS

f:id:game-web-design:20140910120001p:plain

#container {
  width: 760px;
}
#header {
  background-color: #DDD;
  height: 80px; /* ボックスの高さを追加 */
}
#wrapper {
  position: relative; /* #primaryと#secondaryの親ボックスにするためにrelativeを指定 */
}
#primary {
  position: absolute;
  left: 210px; /* 左方向からの配置位置を変更 */
  top: 10px; /* 左方向からの配置位置を変更 */
  width: 550px;
  height: 300px;
  background-color: #C7D5ED;
}
#secondary {
  position: absolute;
  left: 0; /* 左方向からの配置位置を変更 */
  top: 10px; /* 上方向からの配置位置を変更 */
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;