【もりけん塾】position:fixedの後にはpadding-topをするのですか?margin-topですか?

生徒から質問を受けました

position:fixedの後の要素にどのようなプロパティを指定するのが良いか

自分の結論は

padding-topで指定しているサイトがぱっと見多い気がしているので、padding-topで、
崩れなければどちらでもいい。です。

その方のCSSを見ると、

なぜその指定にしなくてはいけなかったのかを確認しました。

するとposition:fixedが書かれたクラスに
z-indexが指定されていました。
その要素は浮いて、
後続の要素はくぐります。
なのでmargin-topを指定していたようなのです。

ちょっと質問の本質とは違うのですが、
その後の要素までrelativeを多用していて
バグを生みやすい印象でした

自分はもうすこし単純にpositionn:fixedでナビをつくれるのではないかと思い
探りました。

その結果、

下のようなコードだけでできることがわかります。


株式会社TerraceTechについて
株式会社TerraceTech

弊社代表のSNS関連
「武骨日記」
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note
FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。
こんなことでお困りではないですか?
・「Webサイト作って作って!」
・「ブログ作って!」
・「LP作りたいんだけど…」
・「写真撮ってくれますか?!」
・「フロントエンド・コーダー・サーバーサイドの方紹介して欲しい…」
・「Web業界で働きたいのですが未経験です。勉強教えてくれますか?」
・「エンジニアを紹介してくれますか?」
・「SNS運用・更新業務してくれませんか?」

など、チャット or info@terracetech.jp
まで気軽にご相談くださいませ

投稿者: moriken

Web技術追っている芸人/ #ブカツ! 中の人Web更新担当/フロントエンドエンジニア/写真家/イラスト/React & TypeScript & GraphQL(AplloClient) インド専門バックパッカ/株式会社TerraceTech代表取締役

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です