问在css div中调整浏览器窗口大小时保持图像位置
EN

Stack Overflow用户

提问于 2021-12-13 10:47:39

回答 2查看 30关注 0票数 0

我使用div和定位来在浏览器中定位我的图像，但是当我调整浏览器窗口的大小时，位置会发生变化，并与页面文本混在一起。当更改窗口大小或使用较小的屏幕时，我想要使元素位于相同的位置。感谢您的关注。

https://jsfiddle.net/20e6srmf/

body{
  margin: 0px;
}

a{
  text-decoration: none;
}

.title{
  width: 100%;
  height: 39px;
  background-color: #0a1931;
}

.container-one{
  position: relative;
  margin:0 auto;
  text-align: end;
  padding: 9px;

}


.about-me{
  color: white;
  padding: 15px;
}

.skills{
  color: white;
  padding: 15px;
}

.cnt-me{
  color: white;
  padding: 15px;
}


.top-section{
  width: 100%;
  height: 550px;   /*378px */
  background-color: #292c6d ;
}

.container-two{
  text-align: center;
  padding-top: 80px;
  width: 70%;
  margin: auto;

}


.astroid{
  width: 79px;
  height: 75px;
  float: right;
}


.rotate{
  transform: rotate(67deg);
}






#top-name{
  margin: 0px;
}

#star-1{
  position: absolute;
  left: 11px;
  top: 23px;

}

#star-2{
  position: absolute;
  top: 172px;
  left: 280px;

}

#star-3{
  position: absolute;
  top: 190px;
  right: 70px;
  margin: 10px
}

}

#star-4{
  position: absolute;
  top: 270px;
  right: 380px;
}



#star-5{
  position: absolute;
  top: 380px;
  left: 450px;
}

#star-6{
  position: absolute;
    top: 280px;
    right: 560px;
}

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

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Home</title>
</head>

<body>

  <div class="title">
    <div class="container-one">
      <a class="cnt-me" href="#">one</a>
      <a class="skills" href="#">shonow</a>
      <a class="about-me" href="#">two</a>
    </div>
  </div>

  <div class="top-section">
    <div class="container-two">
      <img class="astroid rotate" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <h1 id=top-name>welcome to shonow world</h1>
      <h2>there are many things to do in shonow!</h2>
      <h3>let see!</h3>

    </div>

    <div class="stars-decore">

      <img id="star-1" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <img id="star-2" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <img id="star-3" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <img id="star-4" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <img id="star-5" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">
      <img id="star-6" src="https://img.icons8.com/fluency/48/000000/centralized-network.png" alt="star">

    </div>



  </div>


  <div class="mid-section">

  </div>

  <div class="bot-section">

  </div>

  <div class="footer">

  </div>




</body>

</html>

css

回答 2

Stack Overflow用户

发布于 2021-12-13 13:54:15

你有没有注意到有些星星在同一个地方，而另一些星星却在移动？保持自己位置的恒星使用right，而移动的恒星使用left。

因此，在css中的#star- in上，将left更改为right，并相应地调整像素。

票数 0

Stack Overflow用户

发布于 2021-12-14 08:13:07

我认为简单的解决办法是让所有元素都透明一层，并将其放在我的背景上。

票数 0

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

原文链接：

https://stackoverflow.com/questions/70333409

复制

相似问题

问在css div中调整浏览器窗口大小时保持图像位置
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在css div中调整浏览器窗口大小时保持图像位置EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在css div中调整浏览器窗口大小时保持图像位置
EN