ちょっと前までCodestepというサイトを参考に、模写コーディングをやっていましたが、最近再開しました。
この架空Webサイトを作っているのですが、positionでレイアウト崩れが発生してしまいました。
せっかくなので、状況と解決法をまとめていこうと思います。
レイアウト崩れが起きたときの状況
COMPANYという部分を作っていたのですが、レスポンシブデザインにしたら、レイアウト崩れが起きてしまいました(ブレークポイントは900px)。
scssを使っているので、ちょっとコードがわかりにくいかもしれません。
See the Pen
Untitled by Yuki Toi (@Yuki0102)
on CodePen.
ブラウザの幅を狭めると、2つの画像の間が空いてしまっているのがわかります。
対処法
cssを改良することで、解決しました。
.company-rightというクラスに施したposition: relative;が原因だったようで、staticに変更することで、間隔をなくすことができました。
See the Pen
Untitled by Yuki Toi (@Yuki0102)
on CodePen.
ちょっとわかりにくいですが、。画像の間隔がなくなっていることがわかります。
relativeだと相対的な位置に設定されてしまうので、間隔が空いてしまったと考えられます。
まとめ
positionは、複雑なデザインでも簡単に作れるので多用していましたが、レイアウト崩れの原因にもなるとわかりました。
この記事がWeb制作の参考になれば幸いです。