頭脳一式 
以下のHTMLを使った場合にCSSで子要素を位置を決める書き方をサンプルコードとともに紹介します。
HTML
<div class="oya">
<div class="ko">
</div>
</div>
子要素を親要素の左上に表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下を設定する。
- 「top:0px」
- 「left:0px」
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;
}
子要素を親要素の右上に表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下を設定する。
- 「top:0px」
- 「right: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;
}
子要素を親要素の左下に表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下をを設定する。
- 「bottom:0px」
- 「left: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;
}
子要素を親要素の右下に表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下をを設定する。
- 「bottom:0px」
- 「right: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;
}
子要素を親要素の上下中央揃えに表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下をを設定する。
- 「margin:auto」
- 「top:0px」
- 「bottom: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;
}
子要素を親要素の上下右中央揃えに表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下をを設定する。
- 「margin:auto」
- 「top:0px」
- 「bottom:0px」
- 「right: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;
}
子要素を親要素の左右中央揃えに表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、以下をを設定する。
- 「margin:auto」
- 「left: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;
}
子要素を親要素の左右下中央揃えに表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、を設定する。
- 「margin:auto」
- 「left:0px」
- 「right:0px」
- 「bottom: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;
}
子要素を親要素の上下左右中央揃えに表示する
- 親要素には「position:relative」を設定する。
- 子要素には「position:absolute」を設定し、を設定する。
- 「margin:auto」
- 「top:0px」
- 「bottom:0px」
- 「left:0px」
- 「right: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;
}
子要素を親要素の任意の位置に表示する
基本は「top」と「left」のみ使い、上からどのくらい離れているか、左からどのくらい離れているかを意識すると良いです。
以下は上から20px分、左から50px分動かした例です。
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がオススメ！同僚に差をつけよう！
