なぜ私のdivのオーバーラップですか？

-2

私は初心者のプログラマーですから、<header>と<section>のdivが重複している理由がわかりません。私はブロック要素だったので<section>は<header>の下に開始すると思った。何かご意見は？ CSSに追加する必要があるものはありますか？なぜ私のdivのオーバーラップですか？

<!DOCTYPE html> 
<html> 
<head> 
<title>Greg's List</title> 
<meta charset="utf-8" name="description" content="This is the challenge  page for the CSS Layout Lesson in Thinkful. Here I'll be creating a search page for Greg's List"> 

<!-- reset --> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min. css"> 

<!--styles--> 
<link rel="stylesheet" type="text/css" href="main.css"> 

</head> 
<body> 
    <header> 
    <nav class="container"> 
     <h1 class="title">Greg's List</h1> 
     <ul class="links"> 
      <li class="posts"><a href="#">Post</a></li> 
      <li class="account"><a href="#">Account</a></li> 
     </ul> 
    </nav><!--end of nav--> 
    </header><!--end of header--> 

    <section class="search"> 
    <form> 
     <input class="search-bar"> 
     <img src="images/magnifying-glass.png" class="search-pic"> 
    </form> 
    </section><!--end of section--> 
</body> 
</html>

CSS

header { 
width: 100%; 
height: 60px; 
background-color: Gainsboro; 
position: fixed; 
} 


h1 { 
    font-family: Arial; 
} 

.title { 
    display: inline-block; 
    margin-top: 12px; 
    margin-left: 20px; 
} 

ul { 
    display: inline-block; 
    float: right; 
} 

li { 
    display: inline-block; 
    margin-right: 20px; 
    font-size: 25px; 
}

出典

2016-10-05 user2197602

問題が何であるかを見る。 – chazsolo

私はこのJSFiddleにあなたのCSSやHTMLをポップが、任意の即時の問題を見ていないです。

あなたの<ul>にはfloat: right;がありますが、どこでもクリアされないため、要素が重複する可能性があります。

CSS

.clear { 
    clear: both; 
}

HTML

<nav class="container"> 
    <h1 class="title">Greg's List</h1> 
    <ul class="links"> <!-- FLOATED ELEMENT --> 
     <li class="posts"><a href="#">Post</a></li> 
     <li class="account"><a href="#">Account</a></li> 
    </ul> 
    <div class="clear"></div> <!-- CLEAR FLOATS --> 
</nav><!--end of nav-->

I：他の場所で、あなたが使用したフロートと仮定すると、あなたはそうのように、要素をフロート各レベルでclear:both;に確認する必要がありますあなたが本当に十分な情報を含んでいるとは思わないでください（divの要素が重複していると言われましたが、投稿されたHTMLのうちdiv）、私はここで暗闇の中で撮影しています。

編集：あなたの質問への回答も確認してください。Nirjhar Vermaniヘッダーにはposition: fixed;がありますが、これは意図的であると想定していましたが、ヘッダーがウィンドウの静的な位置にとどまり、その周りの要素は無視されます。

出典

2016-10-05 19:31:23 Santi

削除位置：ヘッダーcssから固定。あなたが質問をするとき

、覚えておいてください： - あなたは完全なコードを追加していることを確認してください、あなたのコードにはdiv要素がないよう

あなたのhtmlには `div`sはせずにあなたを助けるために困難になるだろう...ありません

出典

2016-10-05 19:33:18

申し訳ありませんが、私のヘッダーとセクションの要素が重なっているはずです。私はオンラインコースのプロジェクトをやっています。要件の1つは、ヘッダーがページの上部に固定されていることです。 – user2197602

問題ありません。それがうまくいってうれしい –

なぜ私のdivのオーバーラップですか？

答えて

関連する問題