当我将图像更改为绝对位置时，我的图像消失了

【问题标题】：When I change my image to absolute position, my image disapears当我将图像更改为绝对位置时，我的图像消失了
【发布时间】：2022-11-22 13:19:40
【问题描述】：

.BottomCloud {position: absolute;
    margin-top: 200;
    margin-left: 300;
    
    
    }
.TopCloud {position: absolute;
margin-top: 100;
margin-right: 300;}

我试过将位置更改为相对位置，但云没有去我需要它们去的地方

【问题讨论】：

尝试将 inset:0 添加到 position:absolute 元素。然后它就会出现。
你也可以发布你的html吗？
定位时考虑使用单位。我们需要知道您的 HTML 结构以及图像的任何祖先是如何定位的。
</head> <body> <h1>你好我是安东尼</h1> <img class= "Mountain" src ="Images/mountain.png"> <img class= "TopCloud" src ="Images/cloud.png" png"> <img class= "BottomCloud" src ="Images/cloud.png"> <div class="top-container"> </div> <div class="middle-container"> </div> <div class="底部容器"> </div> </body> </html>
当我输入 inset: 0 时它会出现，但是我想移动云，而不仅仅是把它放在角落里

标签： css image position absolute

【解决方案1】：

首先，position: absolute不能单独工作。您必须将 position:relative 添加到父级。如果我没有弄错的话，你正试图制作一个带有浮云的页面。在这种情况下，采用包装 div，使其相对位置。这是代码。

<div class="wrapper">
  <h1>Hello I'm Anthony</h1>
  <img class = "Mountain" src ="Images/mountain.png"> 
  <img class = "TopCloud" src ="Images/cloud.png"> 
  <img class = "BottomCloud" src ="Images/cloud.png"> 
  <div class="top-container"> </div> 
  <div class ="middle-container"> </div> 
  <div class ="bottom-container"> </div>

  </div>

CSS

.wrapper{
   position:relative
 }
.TopCloud {
   position: absolute;
   Top:100px;
   Left:10%
   max-width:30%
 }

您只需要更改 top 和 left 值。 max-width 不是强制性的。一切顺利。

【讨论】：