在对该主题进行了大量研究之后，我找不到我的问题所在。我有一个导航栏和一个设置为绝对的图像。当我编写新代码时，它不会考虑有一个图像并直接进入我的导航栏下方，即使在 html 中它是写在图像下方的。
这里是我的问题的屏幕截图:http://imgur.com/di8VNTw
我希望文本显示在我的页面底部。这是我的代码。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="resto.css">
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" id="ci-google-fonts-css" href="http://fonts.googleapis.com/css?family=Roboto%3A400%2C400italic%2C700%7CAlegreya%3A700italic%2C400%2C400italic&ver=4.4.2" type="text/css" media="all">
<title>Restaurant</title>
</head>
<body>
<div class="body">
<div class="infohaut">
<p><a href="">Réserver dès maitenant | (418) 999-1350</a></p>
<div class="nav">
<div class="container">
<img src="logo-transparent_4.png" alt="">
<ul>
<li><a href="">Acceuil</a></li>
<li><a href="">Notre menu</a></li>
<li><a href="">Notre mission</a></li>
<li><a href="">Nous contactez</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="image">
<img src="coeur.png"/>
<h2>Situé au coeur de la ville</h2>
<p><a href="">Voir notre emplacement</a></p>
</div>
<div class="commentaire">
<h1>rftgere</h1>
</div>
</body>
</html>
CSS
html {
height: 100%;
width: 100%;
font-size:100%;
margin:0 0;
padding:0px;
}
/* le main body du site */
body {
font-weight: normal;
line-height: 1.625;
margin: 0;
padding-right: 25px;
padding-left: 25px;
background-color: rgb(245,245,245);
}
.body {
padding-right: 15px;
padding-left: 15px;
}
/* information en haut de la page */
.infohaut {
background-color: rgb(88, 116, 152);
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
display: inline-block;
font-family: 'Indie Flower', cursive;
}
.infohaut a {
color: white;
padding:0px 0px 0px 0px;
margin: 0px;
font-weight: normal;
line-height: 1.625;
font-size:95%;
width: auto;
height:auto;
float: right;
}
.infohaut a {
text-decoration: none;
}
.infohaut p {
margin: 0px;
padding-right: 5px;
text-shadow:0 0 2px #000000
}
/* hover réservation */
.infohaut a:hover {
color: #E86850;
text-decoration: none;
}
/* barre de navigation */
.nav {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.nav img {
width: 14%;
height: 100%;
padding-left: 15px;
padding-top: 5px;
}
.nav ul {
list-style-type: none;
margin: 0;
float: right;
position:relative;
padding:25px 0px 25px 5px;
letter-spacing: 1.25px;
}
.nav li {
display: inline-block;
padding-top: 0px;
margin-right: 10px;
font-family: 'Dancing Script', cursive;
font-size: 22px;
}
.nav a {
text-decoration: none;
color: #000000;
border: 1px solid rgb(109, 109, 109);
border-radius: 20px;
padding: 16px;
}
.container {
background-color: white;
border: 1px solid black;
}
/* hover des links dans la barre de navigation */
. nav a:link, nav a:visited {
background-color: #ffffff;
text-align: center;
text-decoration: none;
display: inline-block;
}
.nav a:hover, nav a:active {
background-color: #E86850;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0);
}
/* l'image fix */
.image img {
width:100%;
height: 500px;
position: fixed;
top: 147px;
left: 0;
}
.image h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
color:white;
text-align:center;
font-family: "Alegreya", "Georgia", serif;
font-size: 62px;
font-style: italic;
letter-spacing: -0.05em;
text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
}
.image p {
position: absolute;
top: 315px;
left: 0;
width: 100%;
color: white;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 22px;
}
.image a {
text-decoration: none;
color: #ffffff;
border: 1px solid rgb(0, 0, 0);
border-radius: 20px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.71);
}
/* hover pour lemplacement */
.image a:link, image a:visited {
text-decoration: none;
display: inline-block;
}
.image a:hover, image a:active {
background-color: rgba(255, 255, 255, 0.65);
color: #000000;
border: 1px solid rgba(255, 255, 255, 0);
}
/* Commentaire client */
.commentaire {
position: absolute;
color:red;
}
最佳答案
关于html - html 中的代码不会在我的 div 之一下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36561910/