浏览器调试时CSS子元素bottom-cloud不显示样式不生效问题

• 选择器写法与DOM结构不匹配：你写的.middle-container .bottom-container .top-cloud属于后代选择器，要求.top-cloud必须嵌套在.middle-container下的.bottom-container元素内部，但当前HTML结构中不存在middle-container、bottom-container这两个节点，.top-cloud是.top-container的直接子元素，因此这条CSS规则完全不会生效，你之前看到top-cloud渲染只是图片标签的默认加载效果，对应的定位样式根本没有作用到元素上，这也是你修改相关样式没反应的核心原因。
• 底部云定位值超出父容器可视范围：.top-container作为相对定位的定位上下文，高度默认由内部未脱离文档流的文本、山形图片撑开，你给.bottom-cloud设置了bottom: 300px，也就是距离父容器底部向上300px的位置，如果父容器自身总高度小于300px，这个元素就会跑到父容器上方的外部区域，视觉上完全看不到。

修正后的CSS #

.top-container {
  background-color: #E8F9FD;
  position: relative;
  padding-top: 100px;
  /* 给容器设置足够的最小高度，避免绝对定位的子元素超出容器范围 */
  min-height: 650px;
}

/* 修正选择器，匹配实际DOM结构 */
.top-container .top-cloud {
  position: absolute;
  right: 200px;
  top: 50px;
}

.bottom-cloud {
  position: absolute;
  left: 300px;
  /* 调小底部偏移值，可根据实际页面效果调整数值 */
  bottom: 120px;
}

额外检查项 #

• 如果之前给.top-container设置过overflow: hidden属性请删除，该属性会直接隐藏超出容器边界的子元素
• 确认images/cloud2.png资源路径正确，避免因为资源加载失败导致元素不显示
• 修复后再调整两个云的偏移数值，就能得到预期的布局效果

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