我正在尝试为我的投资组合创建我的第一个网页，但我的文本一直与左侧的导航栏重叠，我不知道为什么!我尝试了不同的方法，但到目前为止没有任何效果，我只是不明白问题出在哪里!我是 HTML 和 CSS 的新手，所以我可能在没有意识到的情况下做错了:)
这是我的代码:
/* Heading Styles -----------------------*/
.main-header {
padding-top: 0x;
height: 250px;
text-align: right;
}
#background-image {
background: url("../banner/pilved.jpg") no-repeat center;
background-size: cover;
}
/*Welcome to text------------------------------------*/
.first-line-title {
font-size: 35px;
color: white;
font-weight: normal;
font-style: italic;
position: fixed;
top: 30%;
right: 35%;
}
/* AvesDEsign's portfolio text---------------------*/
.second-line-title {
font-size: 90px;
color: white;
font-weight: normal;
line-weight: 1.3;
position: absolute;
overflow: hidden;
top: 40%;
right: 8%;
}
/* Navigation bar -------------------------*/
* {
margin: 0;
padding: 0;
font-family: Avenir;
}
nav {
width: 250px;
height: 600px;
background-color: rgba(0, 0, 0, 0.2);
line-height: 80px;
text-align: center;
}
nav ul {
float: left;
margin-left: 45px;
margin-top: -5px;
}
nav ul li {
list-style-type: none;
transition: 0.8s all;
font-family: Avenir;
}
nav ul li:hover {
background-color: #d0d6da;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 30px;
}
/* Logo information------------------------------*/
.logo {
margin-left: -8px;
margin-top: 40px;
}<!doctype html>
<html lang="en">
<head>
<title>AvesDesign</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="background-image">
<nav>
<img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">EXPERIENCE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<header class="main-header">
<div class="first-line-title">Welcome to</div>
</div>
<div class="second-line-title">AvesDesign's portfolio
</h1>
</div>
</header>
</body>
</html>最佳答案
肯定会发现一些错误，但让我开始，您应该将 HTML 和 CSS 放在编辑器的指定区域，而不是单独制作 block 。
在 HTML 中，您的代码混淆了。由于将结束标签放置在错误的位置，div 标签和标题未正确关闭。您还缺少一个开头的 h1 标签。 查看 HTML 代码并将其与您拥有的进行比较
下一步是将 position:relative 放在 main-header CSS 声明中。
.main-header {
position: relative;
padding-top: 0x;
height: 250px;
text-align: right;
}
进行这些更改，您可能会朝着正确的方向飞跃。
/* Heading Styles -----------------------*/
.main-header {
position: absolute;
width: 100%;
top: 0;
height: 250px;
text-align: right;
z-index: 0;
}
#background-image {
background: url("../banner/pilved.jpg") no-repeat center;
background-size: cover;
}
/*Welcome to text------------------------------------*/
.first-line-title {
font-size: 35px;
color: red;
font-weight: normal;
font-style: italic;
/* CHANGE POSITION FROM FIXED TO ABSOLUTE */
position: absolute;
top: 30%;
right: 35%;
}
/* AvesDEsign's portfolio text---------------------*/
.second-line-title {
font-size: 40px;
color: green;
font-weight: normal;
line-height: 1.3;
position: absolute;
overflow: hidden;
top: 40%;
right: 8%;
}
/* Navigation bar -------------------------*/
* {
margin: 0;
padding: 0;
font-family: Avenir;
}
nav {
position: relative;
float: left;
width: 250px;
height: 600px;
background-color: rgba(0, 0, 0, 0.8);
line-height: 80px;
text-align: center;
z-index: 999;
}
nav ul {
padding: 0;
margin-left: 45px;
margin-top: -5px;
z-index: 9999;
}
nav ul li {
list-style-type: none;
transition: 0.8s all;
font-family: Avenir;
}
nav ul li:hover {
background-color: #d0d6da;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 30px;
}
/* Logo information------------------------------*/
.logo {
margin-left: -8px;
margin-top: 40px;
}<!doctype html>
<html lang="en">
<head>
<title>AvesDesign</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="background-image">
<nav>
<img class="logo" src="Logo/AvesDesignlogo.png" width="140" height="170" alt="AvesDesignlogo">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">EXPERIENCE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<header class="main-header">
<div class="first-line-title">Welcome to</div>
<div class="second-line-title">
<h1>AvesDesign's portfolio
</h1>
</div>
</header>
</div>
</body>
</html>关于html - 调整浏览器窗口大小时文本重叠导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51801819/