【CSS】position - 要素の相対位置

CSSのpositionプロパティについて解説します。

検証環境

CSS

macOS

14.1

position

positionは“基準位置”のプロパティです。

設定値によって位置関連プロパティ（top、bottom、left、right）の影響を受けます。

影響を受ける場合、位置関連プロパティをオフセットとして要素が配置されます。

基本構文

position: 値;

値

一般的な値は次の通りです。

値	意味
static	標準位置。位置プロパティの影響を受けません。
relative	通常配置。位置関連プロパティの影響を受けます。
absolute	祖先要素で一番近いposition（staticを除く）を定義した要素の位置。位置関連プロパティの効果を受けます。元の位置に要素の空間が確保されません。
fixed	一般的にブラウザに対する位置。位置関連プロパティの効果を受けます。スクロールしても同じ位置に留まります。元の位置に要素の空間が確保されません。
sticky	スクロール時に表示範囲外になる場合、位置関連プロパティのオフセット位置に留まります。

サンプル

位置関連プロパティのtop、leftを使用します。

topは要素上部、leftは要素左部の基準位置からの相対位置を表すプロパティです。

static

sample.html

<style>
div {
    background: lightgray;
}
.sample {
    color: red;
    background: rgba(255, 255, 255, 0.7);
    ___ih_hl_start
    position: static;
    ___ih_hl_end
    top: 50px;
    left: 50px;
}
</style>
<div>
    <img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/position/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets</p>
    <p>
        CSS is a programming language that decorates elements such as HTML and XML.
        You can set various properties such as text color, background, and size.
    </p>
</div>

プレビュー

relative

sample.html

<style>
div {
    background: lightgray;
}
.sample {
    color: red;
    background: rgba(255, 255, 255, 0.9);
    ___ih_hl_start
    position: relative;
    ___ih_hl_end
    top: 50px;
    left: 50px;
}
</style>
<div>
    <img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/position/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets</p>
    <p>
        CSS is a programming language that decorates elements such as HTML and XML.
        You can set various properties such as text color, background, and size.
    </p>
</div>

プレビュー

absolute

sample.html

<style>
div {
    background: lightgray;
    position: relative;
}
.sample {
    color: red;
    background: rgba(255, 255, 255, 0.9);
    ___ih_hl_start
    position: absolute;
    ___ih_hl_end
    top: 50px;
    left: 50px;
}
</style>
<div>
    <img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/position/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets</p>
    <p>
        CSS is a programming language that decorates elements such as HTML and XML.
        You can set various properties such as text color, background, and size.
    </p>
</div>

プレビュー

fixed

sample.html

<style>
div {
    background: lightgray;
    position: relative;
}
.text {
    margin: 120px 40px 0;
    border: 1px solid black;
}
.sample {
    color: red;
    background: rgba(255, 255, 255, 0.9);
    ___ih_hl_start
    position: fixed;
    ___ih_hl_end
    top: 50px;
    left: 50px;
}
</style>
<div>
    <img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/position/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets</p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
</div>

プレビュー

sticky

sample.html

<style>
div {
    background: lightgray;
    height: 300px;
    overflow-y: scroll;
}
.text {
    margin: 120px 40px 0;
    border: 1px solid black;
}
.sample {
    color: red;
    background: rgba(255, 255, 255, 0.9);
    ___ih_hl_start
    position: sticky;
    ___ih_hl_end
    top: 50px;
    left: 50px;
}
</style>
<div>
    <img src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/position/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets</p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
    <p class="text">
        CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    </p>
</div>

プレビュー