【CSS】position - 要素の相対位置
CSSのpositionプロパティをご紹介します。
position
positionは要素の相対位置を示すプロパティです。
top、bottom、left、rightなどの位置関連プロパティはpositionの値に対する相対位置で計算されます。
基本構文
position: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| static | 通常配置。位置関連プロパティは効果がありません。 |
| relative | 通常配置。位置関連プロパティは自要素との相対オフセットで配置します。 |
| absolute | ページレイアウトに要素の空間が確保されません。親・祖先要素で一番近いpositionが定義されている（staticを除く）要素に対する相対オフセットで配置します。 |
| fixed | ページレイアウトに要素の空間が確保されません。一般的にブラウザに対する相対オフセットで配置し、スクロールしても同じ位置に留まります。 |
| sticky | スクロール要素内で表示範囲外の場合に相対オフセットで配置します。 |
サンプル
static
<style>
div {
background: lightgray;
}
p {
color: red;
margin: 0;
position: static;
top: 30px;
left: 30px;
}
</style>
<div>
<img src="/storage/app/media/image/app-programing.jpg">
<p>TEXT</p>
</div>relative
<style>
div {
background: lightgray;
}
p {
color: red;
margin: 0;
position: relative;
top: 30px;
left: 30px;
}
</style>
<div>
<img src="/storage/app/media/image/app-programing.jpg">
<p>TEXT</p>
</div>absolute
<style>
div {
background: lightgray;
position: relative;
}
p {
color: red;
margin: 0;
position: absolute;
top: 30px;
left: 30px;
}
</style>
<div>
<img src="/storage/app/media/image/app-programing.jpg">
<p>TEXT</p>
</div>fixed
<style>
div {
background: lightgray;
}
p {
color: red;
margin: 0;
position: fixed;
top: 30px;
left: 30px;
}
</style>
<div>
<img src="/storage/app/media/image/app-programing.jpg">
<p>TEXT</p>
</div>
<div>
<img src="/storage/app/media/image/app-programing.jpg">
</div>sticky
<style>
div {
background: lightgray;
height: 200px;
overflow-y: scroll;
}
p {
color: red;
margin: 0;
position: sticky;
top: 0;
}
</style>
<div>
<img src="/storage/app/media/image/app-programing.jpg"><br>
<p>TEXT</p>
<img src="/storage/app/media/image/app-programing.jpg"><br>
<img src="/storage/app/media/image/app-programing.jpg"><br>
</div>
<img src="/storage/app/media/image/app-programing.jpg"><br>
