Zenn
🎨

【総まとめ】CSSでHTML要素の位置を変える

2024/07/04に公開
CSS
HTML
Sass
Web
Tailwind CSS
tech

CSSでHTML要素の位置を変更する手順

要素の位置を動かすときは、以下の3段階を踏みます。

  1. HTML要素を用意する
  2. positionでモードを選択
  3. top,　right,　bottom,　leftで位置を指定する

それぞれ解説します。

1. HTML要素を用意する

HTMLがなければ何も始まりません。

index.html
<div class="box">This is box!</div>

何もCSSが適用されていない、裸のHTMLです。

2. positionで配置方法を選択

以下の5つの配置方法があります。1つのHTML要素につき1つだけ選べます。もし2個以上選んだ場合、一番下に書いたものが適用されます。

style.css
.box {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
}

２.1. 元々の位置のままならstatic

機能

もしこのように書いた場合、そのHTML要素は、元々あった場所に配置されます。そのため、その後にtop,　right,　bottom,　leftを書いても何も変わりません。当たり前ですね。
ちなみに、HTML要素が重なる順番を指定するz-indexもposition:static;では固定され、変更できません。

style.css
.box {
    position: static;
}

固定されているので、何も変わりません。

2.2. 微調整にはrelative

下の画像を見てください。これが、position:relative;の配置設定のイメージです。

また、topとbottomがどちらも定義された場合はtopが適用されます。
そして、leftとrightがどちらも定義された場合はleftが適用されます。
例えば、元々の位置から右に50px, 下に100pxズラしたところにHTML要素を置きたい時を考えましょう。その場合は、

style.css
.box {
    position: relative;
    top: 100px;
    rigt: right: 50px;
}

あるいは、元々の位置から左に50px, 下に100pxズラしたところにHTML要素を置きたい時は、

style.css
.box {
    position: relative
    top: 100px;
    left: 50px;
}

2.3. 子要素を親要素上で配置するabsolute

Webサイトを開発していると、親要素の中に小要素を並べる時があります。
その時に、小要素は親要素を基準に位置を決める必要があります。そのような時にabsoluteを使います。
その前にまず、配置の基準となる親要素にrelativeを与える必要があります。もし、親要素にrelativeが与えられなかった場合、ユーザのデバイスの画面(ビューポートと言います)を基準に配置されてしまいます。
次に、小要素にabsoluteを与えます。

style.css
.container {
    position: relative;
}

コンテナというクラスをもつ親要素と、その中に属するボックスというクラスをもつ子要素を作りました。

index.html
<div class="container">
    <div class="box">This is box!</div>
</div>

基準としたい親要素はrelativeにします。そして、実際に配置したい小要素はabsoluteにします。

style.css
.container {
    position: relative;
}

.box {
    position: absolute;
}

2.4. 固定するならfixed

fixedを持つHTML要素は画面の端っこを基準に大きさを変えたり配置したりできます。
fixedを与えられたHTML要素は、元々あった場所からその姿を消します。そして、指定したところに
fixedを適用されたHTML要素は、固定されます。いくらスクロールしても、ずっとその場所にあります。

style.css
.box {
    position: fixed;
    top: 100px;
    right: 50px;
    bottom: 80px;
    left: 60px;
}

2.5. 画面内にある時はスクロールできるsticky

画面の端っこを基準に固定するのはfixedと同じです。しかし、stickyはfixedと異なり、通常フロー残ります。そのため、通常フローが画面上にある時は普通にスクロールできます。
下のような広告を見たことはありますか...？海外のデスクトップアプリのサイトでよくあります。

Discussion