Question

我是初学程序员，我不确定为什么我的<header>和<section> div彼此重叠。我认为，因为它们是块元素，<section>将从<header>开始。有什么想法吗？我需要在CSS中添加一些内容吗？

<!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;
}

Answer 1

删除位置：从标头css修复。

请记住，当您提出问题时： - 请确保添加完整代码，因为代码中没有div

Answer 2

我将您的CSS和HTML弹出到此JSFiddle中，但我没有看到任何直接问题。

话虽如此，我注意到您float: right;上有一个<ul>，但您无法在任何地方清除它，因此这可能导致元素重叠。假设你在其他地方使用了浮点数，你需要确保在每个级别clear:both;浮动元素，如下所示：

<强> 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-->

我认为你没有真正包含足够的信息（你提到了重叠的div元素，但随后发布了不包含单个div的HTML），所以我在拍摄这里的黑暗。

编辑：查看Nirjhar Vermani对您问题的回答。你的标题上有一个position: fixed;，我最初认为这是故意的，但是这会导致标题停留在窗口中的静态位置并忽略它周围的元素。

为什么我的div重叠

2 个答案: