如何修复这些重叠的 HTML 元素？

Question

谁能看看我的代码并告诉我：

如何让图像覆盖 <header> 和 <nav> 以便其他所有内容正确居中。我试过使用 z-index，但似乎没有任何效果。
如何让 <section> 在 <nav> 下方开始而不是在页面顶部其他元素后面的右侧而不使用负载 <br>s?

@CHARSET "ISO-8859-1";

body {
 font-family: "Comic Sans MS", cursive, sans-serif
}

header {
 background-color: #ffd800;
 color: black;
 height: 119px;
 width: 100%;
 margin: -20px -10px;
 min-width: 800px;
 position: fixed;
 margin: -20px -10px;
 text-align: center;
}

.logo {
 float:left;
 width: 118px;
 height: 118px;
 margin-right: 50px;
}

header h2 {
 min-width: 800px;
}

nav ul {
 background-color: #ffd800;
 text-align:center;
 list-style: none;
 width: 800px;
 margin: 0 auto 0 auto;
}

nav li {
 display: inline;
}

nav a {
 display: inline-block;
 padding: 0 30px;
 text-decoration: none;
}

nav a:hover {
 color: white;
}

section {
 width: 800px;
 margin: 0 auto 0 auto;
 background-color: #ffff80;
 border-bottom-right-radius: 40px;
 border-bottom-left-radius: 40px;
 padding: 0 40px 5px 40px
}

section h3 {
 text-align: center;
}

.clear {
 clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
 
 <header>
  <img class="logo" src="resources/img/chris.gif" alt="logo">
  <br>
  <h2>Web Design by Chris Atkinson</h2>
  <nav>
   <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">projects</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact</a></li>
   </ul>
  </nav>
 </header>
 <section>
  <br>
  <br>
  <br>
  <br>
  <h3>Welcome to my site</h3>
  <p>Please take a good look around, and send me some feedback in
   the 'contact' section. I'd love to hear from you</p>
 </section>

</body>
</html>

Answer 1

您需要将徽标与其他内容分开。使您的徽标位置：绝对；并创建一个 z-index 大于它下面的 div。这样它就在您的其他 div 之上，并且不包含在 div 中。这将使您的其余部分保持居中。

路线：

.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}

然后将徽标向左移动。

Answer 2

您可以将您的徽标位置设置为绝对位置，以便其他元素的浮动不会干扰您的徽标：
```
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
```

这是通过更改部分顶部的边距使您的部分位于导航栏下方的方法：

section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}

Answer 3

更改这些 css 属性，您应该能够摆脱所有中断：

section {
   width: 800px;
   background-color: #ffff80;
   border-bottom-right-radius: 40px;
   border-bottom-left-radius: 40px;
   padding: 100px 40px 5px 40px
}

.logo {
  position: absolute;
  width: 118px;
  height: 118px;
  z-index: 20;
}

如果你做的是绝对定位，不需要在标志上向左浮动。此外，您还想添加您的部分的顶部填充（填充中的第一个值属性）以将其向下移动到导航下方。

http://jsbin.com/woyilesoka/2/edit?html,css,output

如何修复这些重叠的 HTML 元素？

How can I fix these overlapping HTML elements?

html

css

element