【发布时间】：2020-07-17 14:48:52
【问题描述】：
我是编码的超级新手，我一生都无法弄清楚为什么英雄图像会覆盖其他内容，即使使用 z-index 也是如此。
Here is what the web page should look like 但主角图片覆盖了关于第一座城堡的徽标、顶部导航栏和标题/描述文本。
body {
margin: 0;
padding: 0;
}
* {
font-family: 'Open Sans', sans-serif;
}
header,
footer,
main {
width: 1040px;
margin: 0 auto;
}
h1 {
font: 700 30px 'Roboto Slab', serif;
z-index: 1;
position: absolute;
display: inline-block;
}
header p {
font: 18px/1.2 'Open Sans', sans-serif;
}
header ul {
font-size: 15px;
line-height: 1.2;
}
h2 {
font-size: 17px;
font-weight: 700;
line-height: 1.2;
margin: 0;
padding: 0;
}
div p {
margin: 0;
}
main p {
font-size: 13px;
line-height: 1.2;
}
h2,
main div p {
color: #fff;
}
footer ul {
display: inline-block;
margin: 0 auto;
list-style: none;
}
footer li,
header li {
float: left;
padding: 0 20px;
}
footer a {
font-size: 15px;
color: #666;
text-decoration: none;
transition: color .4s;
}
header ul {
display: block;
list-style: none;
}
header a {
color: #fff;
text-decoration: none;
transition: color .4s;
}
footer a:hover {
color: #000;
}
footer a:focus {
color: #000;
}
header a:hover {
color: #000;
}
header a:focus {
color: #000;
}
footer nav {
position: absolute;
top: 760px;
left: 460px;
}
main div:nth-of-type(1) {
display: block;
position: absolute;
left: 126px;
top: 658px;
}
main div:nth-of-type(2) {
display: block;
position: absolute;
left: 472px;
top: 658px;
}
main div:nth-of-type(3) {
display: block;
position: absolute;
left: 817px;
top: 658px;
}
main div {
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 0px 5px 10px;
width: 310px;
}
.img1 {
position: absolute;
top: 0;
right: 110px;
z-index: 1000;
}
.img2 {
display: block;
float: left;
margin: 320px 10px 100px 15px;
}
.twitter {
position: absolute;
display: block;
top: 0px;
right: -335px;
}
.facebook {
position: absolute;
display: block;
top: 0px;
right: -295px;
}
/*.logo {display: block; position: absolute; top: 0; left: 0;
z-index: 2;}*/<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- oxygwen, July 17, 2020 -->
<title>Castle Explorers European Tours</title>
<meta charset="utf-8" />
<meta name="description" content="The home page for Castle Explorers, a tour company that takes travelers to see famous castles in Europe." />
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<a href="index.html"><img src="http://via.placeholder.com/300" width="124" height="55" alt="Castle Explorers" /></a>
<ul>
<li><a href="#">UPCOMING EVENTS</a></li>
<li><a href="#">SCHEDULE TOURS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<main>
<h1>Moritzburg Castle</h1>
<p>Enjoy the grandeur of this Baroque palace located on a beautiful lake in Germany.</p>
<a href="#"><img class="img1" src="http://via.placeholder.com/300" width="1040" height="400" alt="Moritzburg Castle" /></a>
<a href="#"><img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Mont Saint Michel Abbey" /></a>
<a href="#"><img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Eilean Donan Castle" /></a>
<a href="#"><img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Neuschwanstein Castle" /></a>
<div class="div1">
<h2>Mont Saint-Michel Abbey</h2>
<p>Visit the Normandy coast and this magical castle from the middle ages.</p>
</div>
<div class="div2">
<h2>Eilean Donan Castle</h2>
<p>Explore the 13th century castle of Clan Mackenzie where three sea lochs meet.</p>
</div>
<div class="div3">
<h2>Neuschwanstein Castle</h2>
<p>Be enchanted by the Bavarian castle that was the inspiration for Cinderella's Castle at Disney World.</p>
</div>
</main>
<footer>
<nav>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Legal Notices</a></li>
<li><a href="#">Press</a></li>
</ul>
<a href="#"><img class="facebook" src="facebook.png" width="17" height="24" alt="facebook link" /></a>
<a href="#"><img class="twitter" src="twitter.png" width="26" height="24" alt="twitter link" /></a>
</nav>
</footer>
</body>
</html>规格：
总结 您正在为 Castle Explorers 的主页编写代码。
使用定位、浮动和盒子模型的任意组合来创建布局。
这种布局可以借鉴课程中的任何材料。
规格
将 HTML5 文件命名为 index.html
所有的 CSS 都将在一个通过链接标签引用的外部文件中；命名这个 main.css 或 styles.css 是整个网站使用的样式表的典型文件名（如果我们要构建网站，这不会发生，所有的 CSS 都会进入这个文件）。
在页面的头部区域包含带有您的姓名和日期的评论。 提供良好的元描述。
随附的屏幕截图提供了要使用的标题标签值。
此布局以固定宽度居中。它是 1040 像素宽。禁用正文的边距和填充（将它们设置为 0）。
使用了两种 Google Web 字体。 'Moritzburg Castle' 使用 Roboto Slab，重量为 700。所有其他文本使用 Open Sans，重量为 400 或 700。 如摘要中所述，您的方法将涉及定位、浮动和框模型的任意组合。
所有图片都在随附的 zip 存档中，并为 Firefox、Chrome 和 Edge 提供了屏幕截图。
当您浏览屏幕截图时，您可能希望使用 Paint.NET 等图形程序来确定文本、图形等的位置。您可以下载该软件的免费版本。 Mac 用户可以尝试 Pinta。还有许多其他选择。有些人喜欢使用 Perfect Pixel 浏览器扩展在您的渲染上叠加屏幕截图。
'Moritzburg Castle' 是一个 30 像素的 h1，字体粗细为 700。如前所述，它是唯一使用 Roboto Slab 的文本。默认的 line-height 可以在那里使用。
它下面的文本是 18px Open Sans，行高为 1.2。
顶部导航是一个无序列表。文本大小为 15 像素，行高为 1.2。 3 座城堡系列的文字（为其名称）是 h2，即 17 像素、700 字体粗细和 1.2 行高。
这些城堡名称 h2 下方的文字是 13px 和 1.2 行高。
我建议使用 rgba(0,0,0,0.4) 为 h2 及其附加文本创建透明度。除了右边是 5px 之外，所有边的内边距都是 10px。
页脚链接也是一个无序列表，但由于它们居中，您可能希望将这些列表项显示为内联块。它们之间有 40px，但请记住，如果代码中存在 inline-block 将呈现单个空格，因此建议消除列表项之间的空格。
页脚链接为 15 像素，颜色为 #666。
顶部导航和页脚链接在悬停和聚焦时都变为#000；给他们一个 CSS 过渡：color .4s ease-in
社交媒体图标不必是无序列表；它们可以只是一对包含图像的锚点。图标之间有 15px 的空间，但如果它们显示在 inline-block 中，请记住消除这些锚点之间的空白以避免引入额外的空间。
所有链接都将使用 href="#"。链接的元素是：
徽标 顶部导航 所有四个城堡的照片 页脚导航 社交媒体图标
确保图像 alt 属性值适当且具有描述性。 HTML 结构元素（header、main、footer、nav）需要适当使用。
有什么想法吗？几小时后就要到了，所以很绝望……谢谢！
【问题讨论】：
标签： html css css-float css-position z-index