Absolute VS Relative
positon: relative：もともとその要素があった場所を基準に配置されます
positon: absolute：祖要素に対して相対配置されます
MDN Reference
まずは、実際に動かしていきましょう！
ポジションの変更を加える前
index.html
<!-- 祖要素 -->
<body>
<h1>CSS relative VS absolute</h1>
<!-- 親要素 -->
<div class="parent">
<!-- 子要素 -->
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
<div class="box" id="four">four</div>
</div>
</body>
style.css
body{
background: rgb(35, 35, 36);
}
h1{
color: gold;
}
.parent {
border: 2px dashed white;
display: inline-flex;
}
.box {
text-align: center;
color: white;
background: #0498a2;
width: 100px;
height: 100px;
margin: 6px;
}
#two {
background: #823dc0;
}
#twoに position : relative ; を付与してみます！
すると、もともとあった配置に対して、上20px、左20pxずれて配置されいていることがわかります。
style.css
#two {
background: #823dc0;
/* 追記 */
top: 20px;
left: 20px;
position: relative;
}
#twoに position : absolute ; を付与してみます！
すると、祖要素のbodyに対して、上20px、左20pxずれて配置されていることがわかります。
style.css
#two {
background: #823dc0;
/* 追記 */
top: 20px;
left: 20px;
position: absolute;
}
次の表示はどのようにすればよいでしょうか？？
この場合は、親要素を基準に、上20px、左20pxずれて配置されていることがわかります。
style.css
.parent {
border: 2px dashed white;
display: inline-flex;
position: relative;
}
/* 省略 */
#two {
background: #823dc0;
/* 追記 */
top: 20px;
left: 20px;
position: absolute;
}
と、記述すればうまく表示されます！
まとめ
abusolute とrelativeの理解に繋がれば幸いです
↧