0
最初にmainimg div.Laterのあとにヘッダーを書きました。例divを追加するとmainimg divの後ろになります。誰かがなぜ画像の背後にあるサンプルdivがあるのか教えてもらえますか？ [Screenshot]絶対に配置されているDivは、後ろに続くdivを許可しています。
![[Screenshot]](https://i.stack.imgur.com/ovtqu.jpg){kind=link}
* {
margin: 0;
padding: 0;
}
.nav .logo {
height: 100px;
display: block;
}
@media only screen and (min-width: 1017px) {
.nav .logo img {
height: 90px;
width: 300px;
display: inline-block;
padding-left: 40px;
margin-top: 5px;
}
}
@media only screen and (max-width: 1016px) {
.nav .logo img {
margin-top: 5px;
height: 90px;
width: 300px;
display: inline-block;
padding-left: 35%;
}
}
@media only screen and (max-width: 1016px) {
.logo ul {
float: right;
margin-left: 5%;
margin-right: 15%;
margin-top: 10px;
list-style-type: none;
}
}
@media only screen and (min-width: 1017px) {
.logo ul {
float: right;
padding-right: 25px;
margin-top: 10px;
list-style-type: none;
}
}
.logo ul li a {
display: inline-block;
text-decoration: none;
padding: 25px;
color: darkgrey;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
}
.nav .logo ul li {
float: left;
}
.nav {
background-color: #18181a;
width: 100%;
overflow: auto;
}
.nav ul li a:hover {
color: #bf0949;
transition-delay: 0.05s;
transition-duration: 0.3s;
}
.mainimg {
position: absolute;
display: block;
}
.themainimg {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
height: auto;
width: 100%;
display: block;
max-width: 100%;
max-height: 700px;
}
.look {
position: absolute;
left: 46%;
top: 80%;
font-family: 'Montserrat', sans-serif;
border: none;
padding: 15px;
color: darkgrey;
border-radius: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>
HexaDesign-Webdesign,Graphic design</title>
<link rel="stylesheet" type="text/css" href="header.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mainbody.css" />
</head>
<body>
<div class="nav">
<div class="logo">
<img src="Images\hexadesignsmall.jpg" alt="hexadesign">
<ul>
<li><a href="webdesigning.html">Web Designing</a></li>
<li><a href="graphicdesigning.html">Graphic Designing</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mainimg">
<img src="Images\mainimage1.jpg" class="themainimg" alt="Need a website?">
<button class="look">Know More</button>
</div>
<div class="example">
<h1>Next div is appearing below the main image</h1>
</div>
</body>
</html>