【CSS】レスポンシブ時にpositionを解除する方法

公開日 2021/8/10 最終更新日 2022/1/13

テキストや画像などを好きな位置に指定させたはいいけど、スマホで見るとき（レスポンシブ時）は解除したい。

positionの解除ってどうやるんだ？

”解除”じゃなくて、”初期値に戻す”だ

まさにこんな表情で思いついたわけですよ（意訳：ゴリゴリに検索しました）。

どうやらpositionの初期値は”initial”のようなので、レスポンシブ時は”initial”に戻す感じですね。（2021.8.18修正）
これで無事レスポンシブ対応できました。

.position{
  position: absolute;
  top: 50%;

  @media (max-width: 767px) {
    .position{ 
      position: initial;
     }
   }
}

タグ