CSSのpositionプロパティを理解する
positonプロパティをマスターすることで、好きな要素を好きな場所に配置したり、スクロールしても同じ位置に配置するような表示ができるようになります。
- positionプロパティの使い方と具体例
- 要素の絶対配置
- z-indexの使い方
positionプロパティで要素の位置を変えよう
positionプロパティで指定できる値は次の通りです。- static
- relative
- absolute
- fixed
position: relative;
top: 30px;
left: 30px; <div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>.box1 {
background-color: orange;
width: 100px;
height: 100px;
}
.box2 {
background-color: skyblue;
width: 100px;
height: 100px;
/* position: static; */
/* position: relative; */
position: fixed;
top: 30px;
left: 30px;
}
.box3 {
background-color: tomato;
width: 100px;
height: 100px;
}
要素の絶対配置
position:absoluteにすることで要素を絶対配置することができます。 このposition:absoluteは子要素に適用します。 親要素がstaticかそれ以外かで挙動が変化するのもポイントです。 親要素がstaticの場合 親要素がstaticの場合、左上から30pxずつとなります。 親要素をrelativeの場合 親要素をrelativeにすると、親要素の左上を基準として30pxずつの位置に配置されます。 右上にちょこんとラベルを載せたいというときは、 position: absolute;を指定した子要素の数値のtopとrightをマイナス数値をいれてあげることで実現できます。 top: -5px;
right: -5px; <div class="box1">Box 1</div>
<div class="box2">
<!-- Box 2 -->
<div class="rect"></div>
</div>
<div class="box3">Box 3</div>
<div class="box3">Box 3</div>.box1 {
background-color: orange;
width: 100px;
height: 100px;
}
.box2 {
background-color: skyblue;
width: 100px;
height: 100px;
/* position: static; */
position: relative;
}
.box3 {
background-color: tomato;
width: 100px;
height: 100px;
}
.rect {
width: 50px;
height: 20px;
background-color: lime;
position: absolute;
/* top: 30px;
left: 10px; */
top: -5px;
right: -5px;
}