问我的形象不是变成了占卜术的一部分，而是上层形象变成了？
EN

Stack Overflow用户

提问于 2020-10-21 00:54:43

回答 1查看 31关注 0票数 0

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Divyang Bhamat</title>
</head>
<link rel="stylesheet" href="CSS/styles.css">
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&family=Sansita+Swashed:wght@500&display=swap" rel="stylesheet">

<body>
  <div class="top-container">
    <img class="top-cloud" src="images/cloud.png" alt="clouds">
    <h1>I'm Divyang </h1>
    <p class="boom">a web developer</p>
    <img class="bottom-cloud" src="images/cloud.png" alt="clouds">
    <img class="newcloud" src="images/cloud.png" alt="clouds">
    <img class="bewcloud" src="images/cloud.png" alt="clouds">
    <img src="images/mountain.png" alt="mountains">
    <div class="middle-container">

      <img class="PP" src="images/circle-cropped1.png" alt="My profile Pic">
      <h2>Hello.</h2>
      <p>I'm an web developer.I Completed My High School in 2020.</p>

      <hr>
      <h2>My Skills.</h2>

      <div class="skill-rowweb">

        <img class="WebDevelopment" src="images/circle-cropped.png" alt="">
        <h3 class="Web">Web Development</h3>
        <p class="Webo"> I Have Recently Started Web Development And I'm Loving it.</p>
      </div>

      <div class="javadiv">
        <img class="bava" src="images/programing.png" alt="">
        <h3 class="division">Learning Java</h3>
        <p>I'm Learning Java To Get Used To Programming.</p>
      </div>

    </div>
    <hr>
    <div class="bottom-container">
      <div class="contact-me">
        <h2>Get In Touch</h2>
        <p>I'm Availabe For Freelance Work Contact Deatalis Given Below.</p>
        <img class="freelance" src="images/freelance-work.png" alt="">
        <br>
        <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
      </div>
    </div>

  </div>
  </div>
</body>

</html>

当我使用杀虫剂时，在上面的div中，名为skill-rowweb的图像被包含在div中，但是当在名为javadiv的下面的div中，所有代码都是相同的，为什么该图像不成为分区的一部分？

body {
  margin: 0;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}

h1 {
  margin: 0;
  font-family: 'Sansita Swashed', cursive;
  font-size: 90px;
  color: #66BFBF;
}

.top-container {
  background-color: #effad3;
  position: relative;
  padding-top: 100px;
}

.bottom-cloud {
  position: absolute;
  top: 230px;
  left: 300px;
}

.top-cloud {
  position: absolute;
  top: 210px;
  left: 350px;
}

.newcloud {
  position: absolute;
  top: 210px;
  right: 350px;
}

.bewcloud {
  position: absolute;
  top: 230px;
  right: 300px;
}

.PP {
  padding-top: 50px;
}

.WebDevelopment {

  height: 200px;

margin-right: 30px;
}

.bava {
  height: 200px;
  position: absolute;
  left: 360px;
top: 1600px;
  margin-right: 30px;
}

.freelance {
  height: 180px;
}

.boom {
  font-size: 40px;
  color: #66BFBF;
  font-weight: normal;
  margin-top: 100px;
}

h3 {
  color: #11999E;
}

.btn {
  color: #11999E
}

.javadiv{
  width: 50%;
  margin: 100px auto 200px auto;
  text-align:left;
  line-height: 2;
}

.division {
  margin-top: 100px;
}

.contact-me {
  background-color: #effad3;
}

.skill-rowweb {
  width: 50%;
  margin: 100px auto 200px auto;
  text-align: left;
  line-height: 2;
}

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-21 01:18:43

.javadiv中的.bava图像具有position: absolute CSS规则，因此它将从静态内容流中移除，并相对于其最接近的position: relative祖先进行定位。我不知道您想要实现什么，但也许向.javadiv添加position: relative规则就是您想要的。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/position

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64449857

复制

相似问题

问我的形象不是变成了占卜术的一部分，而是上层形象变成了？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的形象不是变成了占卜术的一部分，而是上层形象变成了？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的形象不是变成了占卜术的一部分，而是上层形象变成了？
EN