質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

5782閲覧

「position: fixed」を指定した要素の直下のmarginの挙動について

take-t.t.

総合スコア360

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/05/28 18:01

編集2019/05/28 18:34

タイトル通り、「position: fixed」を指定した要素の直下のmarginの挙動が理解できずに困っています。
「position: fixed」を指定する前は①の画像のように全く問題は無かったのですが、それを指定した途端に画像②のようにレイアウトが崩れてしまいました。
デベロッパーツールで確認してみた所、③の画像のようにh1で指定したmarginが意図した挙動ではなく、何故か背景ごと移動してしまっているような感じです。
自分ではイマイチ解決策が見いだせず、質問させていただきました。
①の画像のレイアウトを保ったまま「position: fixed」にするにはどうすれば良いでしょうか?

皆様、ご教授よろしくお願いいたします。

-画像①-
イメージ説明

-画像②-
イメージ説明

-画像③-
イメージ説明

長くなってしまって申し訳ありませんが、該当箇所のコードは一応全て貼らせていただきます。

HTML

1<header> 2 <div class="header-navi"> 3 <img src="img/mylogo.png"> 4 <nav> 5 <ul> 6 <li><router-link to="/top">TOP</router-link></li> 7 <li><router-link to="/about">ABOUT</router-link></li> 8 <li><router-link to="/skills">SKILLS</router-link></li> 9 <li><router-link to="/works">WORKS</router-link></li> 10 </ul> 11 </nav> 12 </div> 13 <h1>Taku's</h1> 14 <h2>portfolio site</h2> 15 <p>Welcome to my site!</p> 16 <div class="down"> 17 <a href="#landing" class="button-sizing"><i class="fas fa-angle-down"></i></a> 18 </div> 19</header>

あとCSSにはこのサイトのreset cssを一番最初に読み込んでいます。http://html5doctor.com/html-5-reset-stylesheet/

CSS

1.center-wrapp { 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 align-items: center; 6} 7 8.button-sizing { 9 display: block; 10 width: 100%; 11 height: 100%; 12} 13 14header { 15 width: 100%; 16 height: 100vh; 17 font-family: 'Orbitron', sans-serif; 18 color: #ffffff; 19 text-shadow: 1px 2px 3px #1d1d1d; 20 background: linear-gradient(135deg, rgba(10, 19, 255, 0.6), rgba(0, 195, 230, 0.6)),url("../img/header-image3.jpg"); 21 background-size: cover; 22 23} 24 25.header-navi { 26/* 27 position: fixed; 28 z-index: 999999; 29 top: 0; 30*/ 31 width: 100%; 32 height: 60px; 33 background-color: rgb(255, 255, 255, 0.9); 34 display: flex; 35 justify-content: center; 36} 37 38header img { 39 border-radius: 50%; 40 margin-right: 200px; 41 width: 60px; 42 height: 60px; 43} 44 45nav ul { 46 margin: 0 auto; 47 display: flex; 48} 49 50nav li { 51 width: 200px; 52 line-height: 60px; 53 font-size: 20px; 54 font-weight: bold; 55 text-shadow: none; 56/* border-bottom: 2px solid #ffffff;*/ 57} 58 59nav li:hover { 60 background-color: rgb(255, 255, 255, 1); 61 transition: 0.8s; 62} 63 64nav a { 65 display: block; 66 width: 100%; 67 height: 100%; 68 color: black; 69} 70 71header h1 { 72 margin: 200px auto 80px; 73 font-size: 85px; 74 letter-spacing: 0.2em; 75} 76 77header h2 { 78 margin: 50px auto 30px; 79 font-size: 40px; 80 letter-spacing: 0.3em; 81} 82 83header p { 84 font-size: 20px; 85 margin: 200px auto 30px; 86 cursor: pointer; 87} 88 89.down { 90 margin: 0 auto; 91 width: 40px; 92 height: 40px; 93 border-radius: 50%; 94 border: 1px solid white; 95} 96 97.down:hover { 98 background-color: white; 99 color: rgb(9, 63, 209, 0.9); 100 transform: scale(0.9); 101 transition: 0.8s; 102} 103 104.down i{ 105 height:40px; 106 width: 40px; 107 color: white; 108 font-size: 30px; 109 line-height: 40px; 110 text-shadow: none; 111} 112 113.down i:hover { 114 color: rgb(9, 63, 209); 115}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

マージンの相殺」で調べてみましょう。
背景を指定するコードが無いので勘ですが、headeroverflow:hidden;を足せば解決する気がします。

【[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック | コリス】
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

【余白が消えるmarginの相殺って何?回避策を徹底解説 | Webのいろは】
https://www.webnoiroha.net/webdesign/css/margin-offset/

投稿2019/05/28 18:19

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/05/29 07:04 編集

ご回答ありがとうございます。 それと背景を指定するコードは、コメントアウトした所を削っている時に間違えて一緒に消してしまっていました。 分かり辛くて申し訳ありません、その部分は修正しました。 マージンの相殺は貼って頂いた二番目のサイトの①の「bottomとtopで被った時に大きいほうが優先される」、という部分をザックリとしか知らなかったのでとても勉強になりました。 こういった細かい部分は若干飛ばし気味でやっていたので、改めて入門書をやり直してみようと思います。 これでなんとか完成しました、本当にありがとうございます。
guest

0

・・・h1で指定したmarginが意図した挙動ではなく・・・

h1のマージンは変化していません。「header-navi」をfixedしたことにより、<header>から外れ、<header>自体の高さが変化(短かくなった)し、それに伴って、背景画像がcover指定なので、<header>の高さに合わせて表示されているだけになります。

原因は「kei344」さんの回答にあるように「マージンの相殺」が絡んできますので、同じく参考先や、検索するといろいろ出てきますので、理解しやすい所で勉強してみてください。

※「kei344」さんの回答にもあるheader部分にoverflow:hidden;や、border-top: solid 1px #fff;での回避方法があるので、いろいろ試してみてください。

投稿2019/05/29 01:04

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/05/29 07:01

ご回答ありがとうございます。 fixed等、親要素から(擬似的に)外れる事がある、というのは全く知りませんでした。 とても勉強になりました。
yoshinavi

2019/05/29 07:14

親要素に「position:static;」以外が無ければ、その親要素、そこにも無ければさらにその親要素等、最終的にはbodyにまで基準となる位置が変わります。 HTML的には外れなくても、CSS的に外れる事で、意図する場合以外には「レイアウト崩れ」の原因にもなるので、「positionの使用」は注意が必要です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問