【CSS】「position: static」について簡単に解説。【分かりやすい】

CSSの「position: static」について簡単に教えてほしい。

この記事はこのような方へ向けて書いています！

それでは、サクッとこの記事で「position: static」の使い方を学習しちゃって下さい！

では、内容へ入っていきますね。

まず「position」プロパティについて少し解説。

まずは少し「position」プロパティ自体についての解説をします。

「position」プロパティで何ができるのか？というと、要素の細かい配置の設定をすることができます。

とても便利なプロパティなので、よく使いますね！

また、下記の動画内で「position」プロパティについてより詳しく解説しているので、深く知りたい方はぜひご視聴下さい！

「position」プロパティに設定できる値は？

「position」プロパティには下記の5つの値が設定できます。

これらの５つの値が設定できますね！

「position」プロパティの初期値は？

「position」プロパティの初期値は「static」です。

この記事で解説するものですね！

「position」プロパティって継承するの？

「position」プロパティは、継承はしません。

他の4つのプロパティと一緒に使う。

「position」プロパティは、下記の４つのプロパティのうち、１つか２つと一緒に使うんですよね。

「position」プロパティは、これらのプロパティと一緒に使うのです！

この辺でまでで、「position」プロパティのことがざっくりと分かったかなと思うので、これからは「position: static」の使い方の解説に入っていきますね！

「position: static」だと要素が動かせない。

「position: static」だと要素が動かせないので、何も指定してない場合と同じ位置に要素は配置されます。

「top」や「left」といたったプロパティが効かなくなる。

たとえ「top」や「left」といたったプロパティを使っていても、要素は動きません。

例えば下記のように書いたとします。

div {
  position: static;
  top: 10px;
  left: 10px;
}

この様に、「top」や「left」といったプロパティを一緒に使っていても、要素は全く動きません。

それが「position: static」ですね。

そもそも「position」プロパティの初期値が「static」

そもそも「position」プロパティの初期値が「static」なので意識して使うことは、あまりないのかなと、思います。

「position: static」を使う場面は？

使うとしたら、既に「position: fixed」などが他のセレクターについていて、それを無効化したい場合に、「position: static」と書くこともあるのかなと思いました。

例えばこんな感じです。

li {
  position: absolute;
  top: 10px;
  left: 10px;
}
li.sta {
  position: static;
}

基本的に「li」要素には「position: absolute」がついていて、その例外に「sta」というclassがついた「li」要素だけ、「position: static」として、動かさない、みたいな指定をすることがあるのかなと思います。

「positon: unset」を使っても同じことができる。

「unset」というグローバル値を使っても同じことができます。

「unset」を指定すると、親要素から継承した値がある場合は「継承した値」が使われ、もし継承がないなら、「初期値」が使われます。

そして「position」プロパティは継承しないので、「初期値」の「static」が使われるという原理ですね。

「position: static」だと「z-index」が効かない。

「position: static」のままの要素は、「z-index」プロパティに何を指定したとしても、効果がありません。

なので、「z-index」プロパティを使いって重ね順を変更したい場合は、「static」以外の何かを指定して下さい。

試してみると、下記の通りです。

こちらの「赤い要素」に「z-index」をつけてみます。

コードはこんな感じです。

.red {
    background-color: red;
    z-index: 1;
  }

するとどうなるかと言うと、下記の通りです。

この様に重なり順が変わりません。

ですが、「static」ではない「relative」を指定してみます。

.red {
    background-color: red;
    z-index: 1;
    position: relative;
  }

こんな感じですね。

するとどうなるかと言うと、下記の通りです。

この様に試してみると、「static」だと「z-index」が効かないことが確認できました！

まとめ

「position: static」を使うと、「top」「left」などを使っても要素を動かせない。

「position: static」だと、「z-index」が効かない。

「position: static」は初期値である。

「position」プロパティは、継承しないので、「position: unset」を使っても「static」を指定するのと同じことができる。

こんな感じですかね。

では、今回の記事はこんなところで終わろうと思います！

「position」プロパティについては、僕のYouTubeチャンネルで詳しく解説していますので、もし気になる方はそちらをどうぞ！

こちらの動画で解説しています！

では、また！