top/right/bottom/left
自身のposition (css)の指定によって挙動が異なる
https://developer.mozilla.org/ja/docs/Web/CSS/top
position: fixedのとき
window内の絶対的な位置に配置される
親要素がなんであるかとかは関係ない
code:html
<style>
.element {
position: fixed;
top: 20px;
right: 20px;
height: 50px;
width: 50px;
background-color: red;
}
</style>
<div class="element"></div>
position: relative
親要素に対する相対的な位置に配置される
code:html
<style>
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.element {
position: relative;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
background-color: red;
}
</style>
<div class="container">
<div class="element"></div>
</div>
position: absoluteのとき
親でrelativeになっている要素の内、一番近いものに対しての相対位置になる
直接の親をrelativeにすることが多いが、別に直接の親である必要はない
が、離れすぎていると読むのが難しくなりそう
code:html
<style>
.container {
position: relative;
height: 200px;
width: 200px;
margin: 20px;
border: 1px solid black;
}
.element {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
background-color: red;
}
</style>
<div class="container">
<div class="element"></div>
</div>
position: sticky
scrollされた時に、親に対する相対的な位置に配置される
つまり、
scroll前は、position: static(default)と同じ
scroll後は、position: relativeと同じ
code:html
<style>
.container {
height: 200px;
width: 200px;
overflow: auto;
border: 1px solid black;
}
.element {
position: sticky;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
background-color: red;
}
</style>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit leo vel nibh feugiat</p>
<div class="element"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit leo vel nibh feugiat, eu euismod velit commodo. Proin scelerisque vel velit at scelerisque. Nulla semper congue dui, a dapibus libero convallis quis. Nam a fringilla est. Sed commodo ipsum et leo rhoncus egestas. Maecenas suscipit ipsum velit, vel laoreet nulla malesuada vel.</p>
</div>
position: staticのとき
top/left/bottom/rightは無視される