【CSS】positionːabsoluteをレスポンシブ対応にする方法

「position:absolute」を使うと、親要素からの相対位置で配置することができます。しかし、このままではデバイスによって画面サイズが異なるため、レスポンシブデザインには向きません。

そこで、「position:absolute」をレスポンシブデザインに対応させるには、「%」を使った相対的な指定や「@media」を使ったメディアクエリを使うことで、画面サイズに応じて配置を調整することができます。例えば、

@media only screen and (max-width: 600px) {
  .example {
    position: absolute;
    left: 10%;
    top: 20%;
  }
}

このように、画面幅が600px以下のときに限り、「.example」というクラスに対して、leftを10%、topを20%に指定して絶対配置します。これにより、画面サイズに応じて自動的に配置が調整され、レスポンシブデザインに対応することができます。