Question

有人可以看看我的代码并告诉我：

如何让图片覆盖<header>和<nav>，以便其他所有内容都能正确显示。我试过玩z-index，似乎没什么用。
如何在不使用<section>的负载的情况下，让<nav>从<br>开始，而不是在其他元素后面的页面顶部开始？< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要将徽标与其他内容分开。使您的徽标位置：绝对;并创建一个大于它下面的div的z-index。这样它就高于你的其他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元素？

3 个答案: