webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

position: relative; について

  • 箱を2つ縦に並べる。position は指定しない。つまり、position: static; のまま。 

f:id:ohta-felica:20160612094719p:plain

  •  box1に、position; relative:を追加すると…

f:id:ohta-felica:20160612094732p:plain

  •  なにも変わりません。
  • こんどは、box2のborderを外して、boxshadowをつけてみる。

f:id:ohta-felica:20160612095003p:plain

  •  あとに記述した内容で上書きされるから、上のようになる。つまり、box2のシャドーが、box1にかかってしまう。
  • border とbox-shadow はそもそもブロック要素に対する付属の仕方がちがう。
  • このあたりは、検証画面を見るとわかるだろう。
  • borderにはきちんと面積が与えられている。けれども、shadowには面積がない。

f:id:ohta-felica:20160612100136p:plain

  • ところで、この状態からposition: relative;をbox1 に追加すると…

f:id:ohta-felica:20160612095452p:plain

  •  box-shadowの重なり方がかわります。
  • position-relative;を記述した要素は、xy軸の座標が変わらなくても、z軸の座標が変わっている感じです。
  • z-indexを記述しなくても、あるいは、z-indexを指定することができるということは、z軸の座標が,position:static;とは違うのです。
  • 深そう…

<head>
<meta charset="utf-8">
<title>position relative</title>
<style>
#container{
width: 960px;
margin: 50px auto;
}
.box{
width: 200px;
height: 200px;
color: white;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
.box1{
background: #900;
border: 4px solid #AAA;
/* position: relative;*/

}
.box2{
background: #00F;
border: 4px solid #AAA;
/* box-shadow: 0 0 4px 4px #000;*/

}
</style>
</head>

<body>
<div id="container">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</body>
</html>