【CSS3】positionの使い方
以下のHTMLを使った場合にCSSで子要素を位置を決める書き方をサンプルコードとともに紹介します。
HTML
<div class="oya">
<div class="ko">
</div>
</div>
See the Pen
position-hidariue by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
top:0px;
left:0px;
}
See the Pen
ExKNMox by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
top:0px;
right:0px;
}
See the Pen
position-hidarisita by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
bottom:0px;
left:0px;
}
See the Pen
position-migisita by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
bottom:0px;
right:0px;
}
See the Pen
position-jogecenter by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
top:0px;
bottom:0px;
}
See the Pen
joge-migi-center by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
top:0px;
bottom:0px;
right:0px;
}
See the Pen
position-sayuucenter by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
left:0px;
right:0px;
}
See the Pen
sayu-sita-center by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
left:0px;
right:0px;
bottom:0px;
}
See the Pen
position-center by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
See the Pen
position-nini by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya {
width: 200px;
height: 200px;
background: skyblue;
position: relative;
}
.ko {
width: 50px;
height: 50px;
background: pink;
position: absolute;
margin :auto;
top:20px;
left:50px;
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！