WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

positionの練習

f:id:mmmmofu:20160815155325p:plain

http://efu.sakura.ne.jp/web/position/


width100pxheight100pxのdivを6個作り
#containerの
1左上
2右上
3左下
4右下
5真ん中
6真ん中より50pxずつ下
に配置する。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>positionの復習</title>
<style>
#container {
  width: 800px;
  height: 600px;
  margin: 50px auto;
  background: #000;
  position: relative;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
}
.TL {
  background: red;
  top:0;
  left: 0;
}
.TR {
    background: yellow;
  top:0;
  right: 0;
}
.BL {
  background: green;
  bottom: 0;
  left: 0;
}
.BR {
  background: blue;
  bottom: 0;
  right: 0;
}
.center {
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  background: #C0F;
  z-index: 2;
}
.center2 {
  left: 50%;
  top: 50%;
  background: #6FC;

}
</style>
</head>
<body>
<div id="container">
<div class="box TL">box1</div>
<div class="box TR">box2</div>
<div class="box BL">box3</div>
<div class="box BR">box4</div>
<div class="box center">box5</div>
<div class="box center2">box6</div>
</div>
</body>
</html>

#containerを基準とするのでposirion:relativeを設定し、
固定する.boxにposition:absoluteを設定する。
absoluteはrelativeが記述されていない場合はbodyが基準となる。
.center2は.centerにz-indexで重なり順を1にして下にする。(0が基準)
.centerは
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
でも真ん中に行く。
幅高さが指定されている場合のみ適用。

関連記事

mmmmofu.hatenablog.com