positionプロパティ
positionプロパティ
- positionプロパティは、要素の配置を指定するプロパティです
- 通常、positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します
- static:位置も重なりも指定できない、positionプロパティの初期値
- relative:相対位置を指定する
- absolute:要素の絶対位置を指定する
- fixed:要素を固定し追従する
- sticky:スクロールで動き、要素を固定する
位置も重なりも指定できないposition: static;
- positionプロパティの初期値はstaticで、通常の位置に配置されます
- staticの場合は、top, left などのプロパティを適用しても反映されません
<div class="box relative"></div> <div class="parent"> <div class="box absolute"></div> </div> <div class="box fixed"></div> <div class="box static"></div>
.box { width: 100px; height: 100px; } .relative { background: red; position: relative; top: 60px; left: 150px; } .parent { position: relative; background: lightblue; width: 200px; height: 200px; } .absolute { background: lightcyan; position: absolute; top: 80px; left: 80px; } .fixed { position: fixed; top: 40px; left: 400px; background: lightgray; } .static { position: static; background: orange; top: 200px; left: 500px; }
position: static; は 重なり順を指定できない
.box { width: 100px; height: 100px; } .relative { background: red; position: relative; top: 50px; left: 50px; z-index: 1; } .parent { position: relative; background: lightblue; width: 200px; height: 200px; z-index: 1; } .absolute { background: lightcyan; position: absolute; top: 150px; left: 40px; z-index: 1; } .fixed { position: fixed; top: 40px; left: 100px; background: lightgray; z-index: 1; } .static { position: static; background: orange; z-index: 1000; }