そんな悩みにお答えします。
CSSでつまずく所っていくつもありますが、その中でもなかなか理解しづらいのがpositionじゃないでしょうか？
特に「relative」「absolute」の使い方が最初全然わからないと思います。
僕はホントに意味不明でした。
ググった内容どおりにコードを書いているはずなのに、思った所に配置できない、画面上から消えるなんてこともありました。
そうならないためには何を理解しておく必要があるのでしょうか。
一緒に見ていくことにしましょう。
今日からあなたもposition「relative」「absolute」を使いこなせるようになりましょう。
目次
positionとは
positionとは要素の位置を決めるためのプロパティです。
たとえば、つねに画面の同じ位置に要素を固定して表示させるという使い方。
下のようなスクロールしても上の部分が変わらないWebサイトってよく見ますよね。
あるいは、要素の上に別の要素を重ねる使い方。
こういうやつです。
これもよく見かけますね。
このような感じで要素の位置を意図した所に配置することができます。
そしてpositionの値には次の４つがあります。
- static ： 初期値。指定することはほぼない。
- fixed ： 決まった位置に固定する
- relative ： 現在の位置を基準に相対的な位置を決める
- absolute ： 親要素を基準に絶対的な位置を決める
ここで初心者が引っかかるのが「relative」と「absolute」です。
「相対的な位置」「絶対的な位置」って何？ってことです。
この相対位置、絶対位置の説明文を読めば読むほど？？？ってなります。
relativeとabsolute
この相対位置、絶対位置にとらわれすぎると、どう使うのかがさっぱりわからなくなります。
ですので初心者がまず覚えるべきは、「relative」と「absolute」のセット使いです。
この使い方が理解できると、相対位置、絶対位置の説明が頭に入ってきます。
ならばこのセット使いをどうやって理解したらいいのか？
僕がすごくわかりやすいなと思ったのがコチラのツイートです。
CSSでまず苦戦するのがpositionだと思います。
absoluteが暴走したり親要素にrelativeを指定しているのに、他の要素が被ったり💦
そこでpositionをわかりやすくモンゴル🇲🇳の羊飼で例えてみました。
relative=柵
absolute=羊🐏
fixed=太陽🌞※定期ツイート#駆け出しエンジニアと繋がりたい pic.twitter.com/iKCkyEapDG
— せきゆおう🥙Web制作をのあれこれ発信する人 (@wurst_design) July 19, 2021
羊を飼う柵がrelativeで、その中で動き回る羊がabsolute。
すごくイメージしやすいですよね。
こういうたとえがあると、relativeとabsoluteの関係性がよくわかります。
position: absolute での中央揃え
relativeとabsoluteのセット使いでよく出てくるのが中央揃えです。
非常に重宝します。
共通HTML
<div class="parent">
<div class="child">絶対配置</div>
</div>
上下中央揃え
.parent {
width: 100%;
height: 300px;
background-color: #00CC99;
position: relative;
}
.child {
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
左右中央揃え
.parent {
width: 100%;
height: 300px;
background-color: #00CC99;
position: relative;
}
.child {
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
上下左右中央揃え
.parent {
width: 100%;
height: 300px;
background-color: #00CC99;
position: relative;
}
.child {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
−50%ってなんだ？
ここがまた引っかかりポイントです。
上下左右中央揃えのときの子要素のCSSがコチラです。
.child {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}「top: 50%」はわかる、「left: 50%;」もわかる。
でも「transform: translate(-50%, -50%);」が一体なにをしているのかがよくわからないのです。
これは考えるより実際に「transform: translate(-50%, -50%);」がない場合を書いてみた方が早く理解できます。
以下がない場合です。
見てわかるように子要素の大きさ分だけズレています。
これだと中央揃えになっていません。
ですのでtransformを使って子要素の50%分を戻します。
これで上下左右中央揃えとなります。
position「relative」「absolute」は最初本当につまずきやすいポイントだと思います。
まずはなぜそう動くのかを理解して、あとは実際に書いてみる。
いろんなパターンを経験していくうちに書き方も自然と覚えていくはずです。
あなたも今日からposition「relative」「absolute」を使いこなせるようになりましょう。
以上です。
投稿者 トシ
コメントを残す