PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】 position

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;


#headerより下の要素は#wrapperに追従するので(relativeを指定しているので)、その他のpositionの数値も#wrapperの左端から考えます。

全体をセンタリングする。

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

この場合#wrapperが親ボックスになっているので、#containerに「margin 0 auto;」を入れることで、センタリングが可能です。