왜 내 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을 게시했습니다.), 그래서 나는 여기서 어둠 속에서 총을 쏜다.

편집 : 질문에 대한 답변은 Nirjhar Vermani입니다. 헤더에 position: fixed;이 있습니다. 원래 의도적이라고 가정했으나 헤더가 정적 위치에 머물러 있고 그 주위의 요소는 무시됩니다.

출처

2016-10-05 19:31:23 Santi

제거 위치 : 헤더 CSS에서 고정. 당신이 질문을 할 때

, 기억 - 당신은 전체 코드를 추가해야합니다 코드에서 어떤 사업부가 없기 때문에

당신의 HTML에는`div`s없이 당신을 도울 어려울 것 없습니다 ...

출처

2016-10-05 19:33:18

죄송합니다. 내 머리글과 섹션 요소가 겹쳐져 있다고 말했어 야합니다. 나는 온라인 과정을위한 프로젝트를하고 있는데, 요구 사항 중 하나는 헤더가 페이지 상단에 고정된다는 것입니다. – user2197602

문제 없습니다. 그것이 다행했기 때문에 –

왜 내 div가 겹치고 있습니까

답변

관련 문제