読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

positionによるレイアウト

positionとは

  • テキストP.130〜136
  • 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>positionを使ったレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="box boxA"></div>
<div class="box boxB"></div>
</div>
</body>
</html>
@charset "UTF-8";

html, body {
  margin: 0;
  padding: 0;
}
#container {
  width: 400px;
  height: 400px;
  margin: 100px auto;
  background-color: #EDEDED;
}
.box {
  width: 100px;
  height: 100px;
}
.boxA {
  background-color: #EF0;
}
.boxB {
  background-color: #0EF;
}


f:id:web-0818:20161109184546p:plain

positionを設定
@charset "UTF-8";

html, body {
  margin: 0;
  padding: 0;
}
#container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 100px auto;
  background-color: #EDEDED;
}
.box {
  width: 100px;
  height: 100px;
}
.boxA {
  position: absolute;
  left: -50px;
  top: -50px;
  background-color: #EF0;
}
.boxB {
  position: absolute;
  right: -50px;
  bottom: -50px;
  background-color: #0EF;
}


f:id:web-0818:20161109185516p:plain


header内で設定
<!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">
<div id="logo"><img src="http://placehold.it/150x50"></div>
</div><!-- /#header -->
</div><!-- /#container -->
</body>
</html>
@charset "UTF-8";

html, body {
  margin: 0;
  padding: 0;
}
img {
  vertical-align: bottom;
}
#container {
  width: 800px;
  height: 300px;
  margin: 100px auto;
  background-color: #0EF;
}
#header {
  position: relative;
  height: 100px;
  background-color: #EF0;
}
#logo {
  position: absolute;
  right: 0;
  bottom: 0;
}


f:id:web-0818:20161109192445p:plain

headerの次にコンテンツが続く場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>positionを使ったレイアウト</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="http://placehold.it/150x50"></div>
</div><!-- /#header -->
<div id="nav"></div>
</div><!-- /#container -->
</body>
</html>
@charset "UTF-8";

html, body, ul, li {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
img {
  vertical-align: bottom;
}
#container {
  width: 800px;
  height: 300px;
  margin: 100px auto;
  background-color: #0EF;
}
#header {
  position: relative;
  height: 100px;
  margin-bottom: 10px;
  background-color: #EF0;
}
#logo {
  position: absolute;
  right: 0;
  bottom: 0;
}
#nav {
  height: 50px;
  background-color: #ECECEC;
}


f:id:web-0818:20161109204233p:plain