positionを使ったレイアウト

css

positionとは

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


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

position: relative（相対的）

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

position: absolute（絶対的）

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



例


《index1.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>positionを利用したカラムレイアウト</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>


《style1.css》

@charset "UTF-8";

html,body,div {
  margin: 0;
  padding: 0;
}
body {
  background-color: #C5C7CC;
  text-align: center;
}
#container {
  width: 760px;
  height:  auto;
  margin: 0px auto;
  padding: 10px;
  background-color: #FFFFFF;
}
#header {
  background-color: #F3FFE7;
  width: 760px;
  height: 50px;
  margin-bottom: 10px;
}
#wrapper {
  position: relative; /* 値にrelativeを指定 */
  width: 760px;
  height: 300px;
  margin-bottom: 10px;
  background-color: #75B3C4;
}
#content {
  position: absolute; /* 値にabsoluteを指定 */
  left: 0; /* 左方向からの配置位置を指定 */
  width: 550px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #C7D5ED;
}
#sidebar {
  position: absolute; /* 値にabsoluteを指定 */
  left: 560px; /* 左方向からの配置位置を指定 */
  width: 200px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #F9CFBA;
}
#footer {
  background-color: #F8E6F8;
  width: 760px;
  height: 50px;
}


《index2.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>positionを利用したカラムレイアウト</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>


《style2.css》

@charset "UTF-8";

html,body,div {
  margin: 0;
  padding: 0;
}
body {
  background-color: #C5C7CC;
}
#container {
  width: 760px;
  height:auto;
  margin: 0px auto;
  padding: 10px;
  text-align: center;
  background-color: #FFFFFF;
}
#header {
  background-color: #F3FFE7;
  width: 760px;
  height: 50px;
  margin-bottom: 10px;
}
#wrapper {
  position: relative; /* 値にrelativeを指定 */
  width: 760px;
  height: 310px;
  background-color: #75B3C4;
}
#content {
  margin-left: 210px;
  width: 550px;
  height: 300px;
  background-color: #C7D5ED;
}
#sidebar {
  position: absolute; /* 値にabsoluteを指定 */
  left: 0;
  top: 0;
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;
}
#footer {
  background-color: #F8E6F8;
  width: 760px;
  height: 50px;
}

実践

header内ブロックを右側に配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>positionの使いどころ</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="header_inner">
<ul>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div><!-- /#header_inner -->
</div><!-- /#header -->
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div><!-- /#wrapper -->
<div id="footer">footer</div>
</div><!-- /#container -->
</body>
</html>


《style3.css》

@charset "UTF-8";

html,body,div,ul,li {
  margin: 0;
  padding: 0;
}
body {
  background-color: #C5C7CC;
}
#container {
  width: 760px;
  height:auto;
  margin: 0px auto;
  padding: 10px;
  text-align: center;
  background-color: #FFFFFF;
}
#header {
  position: relative;
  background-color: #F3FFE7;
  width: 760px;
  height: 80px;
  margin-bottom: 10px;
}
#header_inner {
  position: absolute;
  font-size: 0.8em;
  width: 320px;
  text-align: right;
  right: 10px;
  top: 40px;
}
#header_inner li {
  display: inline;
  margin-right: 8px;
}
#wrapper {
  position: relative; /* 値にrelativeを指定 */
  width: 760px;
  height: 310px;
  background-color: #75B3C4;
}
#content {
  margin-left: 210px;
  width: 550px;
  height: 300px;
  background-color: #C7D5ED;
}
#sidebar {
  position: absolute; /* 値にabsoluteを指定 */
  left: 0;
  top: 0;
  width: 200px;
  height: 300px;
  background-color: #F9CFBA;
}
#footer {
  background-color: #F8E6F8;
  width: 760px;
  height: 50px;
}