绝对定位未分离图片流，山脉与云朵元素层级布局失效求助

1. HTML语法错误（核心问题） #

你的图片元素class属性写法错误，用了冒号:而非等号=，导致CSS选择器无法匹配元素，所有针对.top-cloud、.bottom-cloud的样式完全不生效。

错误写法：

<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">

修复后：

<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">

2. Absolute定位未脱离流的原因 #

给.bottom-cloud设置position: absolute后，元素本应脱离标准流，但如果父容器没有设置position: relative，绝对定位元素会相对于body而非.top-container定位，导致布局混乱。需要给.top-container添加相对定位，让云朵在容器内可控：

.top-container {
  background-color: #CEE5D0;
  position: relative; /* 添加相对定位，作为绝对定位元素的参考容器 */
  padding-top: 100px; /* 避免顶部云朵与标题内容重叠 */
}

3. 层级与布局调整 #

要让云朵和山脉处于不同层级，可通过z-index控制层级优先级，同时给云朵设置具体的定位坐标，实现预期的上下层布局：

.top-cloud {
  position: absolute;
  right: 300px;
  top: 50px;
  z-index: 1; /* 数值越大层级越高，可按需调整 */
}

.bottom-cloud {
  position: absolute;
  left: 300px;
  bottom: 300px;
  z-index: 1;
}

/* 山脉默认处于标准流，z-index默认低于绝对定位元素，如需调整可自行设置 */

完整修复代码 #

HTML部分 #

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

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="icon" href="images/icon2.ico">
  <title>Farhan Sadiq</title>
</head>
<body class="body">
  <div class="top-container">
    <img class="top-cloud" src="images/cloud.png" alt="cloud-img">
    <h1>Farhan Sadiq</h1>
    <p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
    <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
    <img src="images/mountain.png" alt="mountain-img">
  </div>
  <div class="middle-container">

  </div>
  <div class="bottom-container">

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

CSS部分 #

.body {
  margin: 0;
  text-align: center;
}

h1 {
  margin-top: 0;
}

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

.middle-container {
  background-color: pink;
  width: 200px;
  height: 200px;
}

.bottom-container {
  background-color: yellow;
  width: 200px;
  height: 200px;
}
.underline {
  text-decoration: underline;
}

.top-cloud {
  position: absolute;
  right: 300px;
  top: 50px;
}

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

内容的提问来源于stack exchange，提问作者Farhan Sadiq