Question

首先我写了标题，然后是mainimg div.Later，当我添加示例div时，它会在mainimg div后面。任何人都可以告诉我为什么示例div落后于图像。 [Screenshot]

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

你设置＆＃39; mainimg＆＃39;位置：绝对，绝对永远不会在页面上采取sapce。你必须从mainimg中删除position：absolute：

.mainimg {
  /*position: absolute;*/
  display: block;
}

或者如果需要position：absolute，则将其与一些相对div放在一起。

绝对定位的Div允许跟随div。

1 个答案: