我正在制作我的第一个网页，但我在定位元素方面遇到了麻烦。当我调整浏览器大小时，它们会相互重叠。标题位于绝对位置，但这意味着它与顶部的图像重叠。我不能通过任何其他方式使它到位。有人可以帮忙吗？
这是html：
<!DOCTYPE html>
<html>
<head>
<title>Guitar Lessons</title>
<link href="./bio.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth"/>
<div class="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<nav class="navigation">
<ul>
<li><a href="C:\Users\Duncan\Desktop\Coding\Guitar lessons\bio.html" style="text-decoration:none;"><p class="first">About Me</p></a></li>
<li><a href="C:\Users\Duncan\Desktop\Coding\Guitar lessons\my music.html" style="text-decoration:none;"><p class="second">My Music</p></a></li>
<li><a href="C:\Users\Duncan\Desktop\Coding\Guitar lessons\FAQ.html" style="text-decoration:none;"><p class="third">FAQ</p></a></li>
<li><a href="C:\Users\Duncan\Desktop\Coding\Guitar lessons\prices.html" style="text-decoration:none;"><p class="fourth">Prices</p></a></li>
<li><a href="C:\Users\Duncan\Desktop\Coding\Guitar lessons\contact.html" style="text-decoration:none;"><p class="fifth">Contact</p></a></li>
</ul>
</nav>
</header>
<h2 id="bio">My Bio</h2>
<p class="bio">Hello! I am Duncan – famous for imparting my guitar knowledge on the residents of Isleworth. I have been playing the guitar for over ten years and can navigate<br/> the fretboard confidently. I am completely self-taught, and it’s been a real learning curve which I am keen to pass on to others wishing to learn the guitar. Through<br/> my learning experience, I realise the value of having human interaction and feedback whilst learning. I am a very patience teacher, which makes me<br/> suitable for teaching beginners.<br/><br/>
My musical influences are based heavily on the blues, and my favourite guitarists include Peter Green, Muddy Waters, B.B. King, Jimmy Page, Eric Clapton,<br/> Wilko Johnson and Jimmy Hendrix. I have recently started to write my own music, with the aim one day of recording properly and creating a short album.
</p>
<h2 id="lessons">Lesson Content</h2>
<p class="content">I specialise in taking complete beginners through the different aspects of playing the guitar and I aim to have you confident and skilled enough to play a<br/> short piece of music (something other than a nursery rhyme!) within just three lessons. Aspects of playing my lessons cover include:</p>
<ul class="lessons">
<li>Basic open chord shapes</li>
<li>Strumming patterns and rhythm</li>
<li>Learning notes on the fret board</li>
<li>Lead techniques and single note lines</li>
<li>Advice on gear and the best guitars to buy</li>
</ul>
<p class="content">Practice makes perfect, and you are given homework between each lesson to play on your guitar.</p><br/><br/>
<div class="guitar">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar.jpg" />
</div>
<br/>
<p class="copyright">Copyright Duncan Hammett 2018</p><br/>
</body>
这是css：
nav li {
display: inline-block;
padding: 50px;
}
.first {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 28px;
}
.first:hover {
color: teal;
}
.second {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.second:hover {
color: teal;
}
.third {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.third:hover {
color: teal;
}
.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fourth:hover {
color: teal;
}
.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fifth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fifth:hover {
color: teal;
}
.header img {
width: 1440px;
height: 400px;
position: relative;
left: 240px;
min-width: 1440px;
max-width: 1440px;
min-height: 400px;
max-height: 400px;
}
.cont {
position: relative;
}
.top-left {
position: absolute;
top: 11px;
left: 12px;
color: teal;
font-size: 124px;
}
body {
font-family: Helvetica;
text-align: center;
font-size: 20px;
}
.guitar img {
width: 1100px;
height: 600px;
position: static;
min-width: 1100px;
max-width: 1100px;
min-height: 600px;
max-height: 600px;
}
.bio {
line-height: 1.6;
color: teal;
}
.content {
line-height: 1.6;
color: teal;
}
.lessons {
line-height: 1.6;
list-style-position: inside;
color: teal;
}
.copyright {
color: teal;
font-size: 16px;
}