レイアウト position - web-0127のブログ

positionとは

positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する
positionプロパティで指定するのは、配置方法（基準位置）のみ

static	特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative	相対位置への配置となります。 positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute	絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed	絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

position: relative（相対的）

その要素本来の位置（左上）からの移動距離

position: absolute（絶対的）

包含ブロック（左上）からの移動距離

positionレイアウト

デフォルト値はstatic（通常配置）ですが、absolute（絶対配置）に変更することで自由な配置のレイアウトにすることができます

絶対配置（absolute）

position:absolute;が設定されると、そのコンテンツは通常の配置の流れから切り離され「基準ボックス」を基点として絶対値により自由に配置することができます
「基準ボックス」は任意に指定できます。指定しない場合は、bodyが基準ボックス扱いになります

表示させたい場所の座標を指定する

右上が基準の場合、「right: 0; top: 0;」

基準ボックスを変更する

親要素である #wrapper に position:relative; を設定すると親ボックスの基準からの絶対値で指定ができます

他要素との重なり準を指定する

positionにstatic以外の値が指定され要素同士が重なった場合は、何もしなければソースコードの上から順に表示されます
この重なりを変更したい場合は、z-indexプロパティで指定します。数値が大きいほうが上になります。一般的に z-index:1000; が最も上位に表示するように指定します

固定配置（fixed）

position:fixed; は、絶対位置でコンテンツを配置できますが、常にbody要素（ブラウザウィンドウ）が基準となることと、コンテンツをスクロールしてもウィンドウ内でずっと同じ位置に配置が可能です

positionレイアウトの注意点

絶対配置の注意点

floatするコンテンツを囲む親要素に指定する「overflow:hidden;」のように、親要素が自動的に伸縮することはできません
うまく設計しないと枠からはみ出して他のコンテンツに重なって表示され、情報の読み取りに支障をきたす結果になりかねません

固定配置の注意点

position:fixed; は、すべての環境で正しく動作するわけではありません

ボックスの幅と位置を指定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボックスの幅と位置を指定する</title>
<style>
#wrapper {
  width: 760px; /* レイアウト全体の幅を指定 */
}
#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;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>絶対配置するボックスの親ボックスを作る</title>
<style>
#container {
  width: 760px;
}
#header {
  background-color: #DDDDDD;
  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;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
</div>
</body>
</html>

レイアウト全体をセンタリングする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レイアウト全体をセンタリングする</title>
<style>
body {
  text-align: center; /* テキストを中央揃えに指定 */
}
#container {
  width: 760px;
  margin: 0 auto; /* 左右方向のマージンをautoに指定 */
  text-align: left; /* テキストを左揃えに指定 */
}
#header {
  background-color: #DDDDDD;
  height: 50px;
}
#wrapper {
  position: 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;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
</div>
</body>
</html>

両側をまたぐフッターを配置する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>両側をまたぐフッターを配置する</title>
<style>
body {
  text-align: center;
}
#container {
  width: 760px;
  margin: 0 auto;
  text-align: left;
}
#header {
  background-color: #DDDDDD;
  height: 50px;
  margin-bottom: 10px; /* 下方向に10pxのマージンを指定 */
}
#wrapper {
  position: relative;
  margin-bottom: 10px; /* 下方向に10pxのマージンを指定 */
  width: 100%; /* ボックスの幅を指定 */
}
#primary {
  /* positionの指定を削除 */
  margin-left: 210px; /* 左方向に210pxのマージンを指定 */
  background-color: #C7D5ED;
  height: 300px;
}
#secondary {
  position: absolute;
  left: 0;
  top: 0; /* 上方向からの配置位置を変更 */
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;
}
#footer {
  background-color: #DDDDDD;
  height: 50px;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

本文の段組を可変にする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本文の段組を可変にする</title>
<style>
body {
  /* text-alignの指定を削除 */
}
#container {
  width: 100%; /* ボックスの幅を指定 */
  /* text-alignの指定を削除 */
  /* marginの指定を削除 */
}
#header {
  background-color: #DDDDDD;
  height: 50px;
  margin-bottom: 10px;
}
#wrapper {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}
#primary {
  margin-left: 210px;
  background-color: #C7D5ED;
  height: 300px;
}
#secondary {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;
}
#footer {
  background-color: #DDDDDD;
  height: 50px;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

三段目のボックスを配置する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>三段目のボックスを配置する</title>
<style>
#container {
  width: 100%; /* ボックスの幅を指定 */
}
#header {
  background-color: #DDDDDD;
  height: 50px;
  margin-bottom: 10px;
}
#wrapper {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}
#primary {
  margin: 0 155px; /* 左右方向に155pxのマージンを指定する */
  background-color: #C7D5ED;
  height: 300px;
}
#secondary {
  position: absolute;
  left: 0;
  top: 0;
  width: 145px; /* ボックスの幅を変更 */
  height: 300px;
  background-color: #F9CFBA;
}
#advertisement {
  position: absolute; /* 値にabsoluteを指定 */
  right: 0; /* 右からの配置位置を指定 */
  top: 0; /* 上からの配置位置を指定 */
  width: 145px; /* ボックスの幅を指定 */
  height: 300px;
  background-color: #E5C7ED;
}
#footer {
  background-color: #DDDDDD;
  height: 50px;
}
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
<div id="advertisement"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>