Q&A
それは、かかってないですね
別htmlファイルを呼び出して、TOPに表示しているようにしたんですが、その下に文字を入れると、呼び出したファイルの下に隠れてしまうのはわかります。
でも、なぜか、一番上に固定したはずの呼び出しファイルがしたにすこしずれ、入れた文字のdivタグにCSSで、margin-topでどれだけ入れても、文字が見えることはありません。
これはいい感じに固定されてます。
追記です。
css
1body { 2 padding-top: 40px; 3} 4iframe#p_top { 5 position: fixed; 6 top: 0; /* 追記：これも必要 */ 7}
回答いただいたこのソースを記述したところ、padding-top: 40px;のせいで、固定ヘッダーの上に空間が空いただけでした。
そのしたのソースで変わったところはわかりません。
文字が隠れたままです。
ここで一度整理します。
今起きている問題は、上部にヘッダーを固定することはできたのですが、その固定したヘッダーの下に違うファイル（グローバルナビ）やテキストなどを書くと、ヘッダーの下に隠れてしまいます。
隠れた要素をCSSでmargin-topなどで下にさげようとしてもゆうこときいてくれません。
自分はお手上げ状態です。
呼び出されている側は、前のファイルなので問題ないので、呼び出し側の問題だと思うので、ソースを貼って起きます。
html
1<html lang="jp"> 2 <head> 3 <!-- mainstyle呼び出し --> 4 <link rel="stylesheet" href="CSS/mainstyle.css"> 5 <!--style呼び出し --> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div> 10 <!-- ヘッダーを呼び出し --> 11 <iframe id="header" src="header/header.html" frameborder="no"></iframe> 12 </div> 13 14 <!-- ナビを呼び出し --> 15 <div> 16 <iframe id="nav" src="nav/nav.html" frameborder="no"></iframe> 17 </div> 18 <!-- メイン内容 --> 19 <div id="wrapper"> 20 <div id="content"> 21 <p>コンテンツ</p> 22 </div> 23 </div> 24 </body> 25</html>
css
1body{ 2 /* 背景色を設定 */ 3 background: #eee; 4 /* 枠をなくす */ 5 margin: 0; 6 7} 8#header{ 9 width: 100%; 10 height: 40px; 11 position:fixed; 12} 13nav{ 14 padding-top: 50px; 15 16 width: 1400px; 17 height: 140px; 18 19 margin: 0 auto; 20 21} 22
css
1#wrapper{ 2 margin-top:10px; 3 width:80%; 4 margin-right:auto; 5 margin-left:auto; 6} 7#content{ 8 background:#fff; 9 height:900px; 10}
回答3件
0
【CSS3 - 上部固定ヘッダー(50670)｜teratail】
https://teratail.com/questions/50670
これの続きということは、その記事を見たことがある人しか分からないのできちんと書きましょう。
たぶん p要素の marginが body要素を押していると思われます。
CSS
1body { 2 padding-top: 40px; 3} 4iframe#p_top { 5 position: fixed; 6 top: 0; /* 追記：これも必要 */ 7}
【CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17】
http://kojika17.com/2012/08/margin-of-css.html
【ほんっとにはじめてのHTML5とCSS3：【11-4】marginの相殺（margin collapsing）】
http://honttoni.blog74.fc2.com/blog-entry-231.html
【marginの相殺の考察 ｜ Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/html_css/post10892.html
投稿2016/10/07 16:38
編集2016/10/07 16:43
総合スコア69407
0
自己解決
ナゼかそのままのコードで表示することが出来ました。
投稿2016/10/08 06:54
総合スコア437
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/07 16:48
2016/10/07 17:10
2016/10/07 17:15
2016/10/07 17:21
2016/10/07 17:31
2016/10/07 18:06
2016/10/07 18:16
2016/10/08 06:17