CSS relative容器内元素设position:absolute后消失问题

.blob设置绝对定位后消失，是3个问题共同导致的：

• 代码存在笔误：你贴出的样式里.blob的定位属性写为大写开头的Position，标准模式下CSS属性名严格区分大小写，该写法会导致定位规则完全不生效。
• 负z-index导致元素被父容器遮挡：父容器.landing仅设置了position: relative，没有指定z-index，不会生成独立堆叠上下文，此时给子元素设置z-index: -2，元素会被放置到父容器背景层的下方，直接被父容器的橙色背景盖住，视觉上完全消失。
• 尺寸与定位参数缺失：.blob是无内容的空div，设置绝对定位后元素宽度会按收缩-to-fit规则计算，仅设置max-width: 90%没有明确宽度值的话，空元素宽度会坍缩为0；同时没有设置水平方向的定位偏移（left/right），元素水平位置也会偏离预期。

调整对应CSS规则即可，HTML结构无需改动：

1. 修正属性名大小写，将大写开头的Position改为小写position
2. 放弃负z-index的写法，改用正z-index给容器内元素分层：给图片设置更高的z-index放在上层，.blob设置更低的正z-index放在图片下方，避免元素被父容器背景遮挡
3. 给.blob补充明确的宽度值和水平定位参数，避免空元素尺寸坍缩

修正后的完整CSS代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

@media only screen and (max-width: 480px), screen and (max-height: 900px) {
  .landing {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #F8D0B0;
  }
  .landing img {
    position: absolute;
    max-width: 90%;
    height: auto;
    bottom: 13%;
    right: 6.5%;
    z-index: 2; /* 图片放在上层 */
  }
  .blob {
    position: absolute; /* 修正属性名大小写 */
    bottom: 10%;
    left: 5%; /* 补充水平偏移，配合90%宽度实现左右居中留边 */
    width: 90%; /* 明确设置宽度，避免空元素宽度坍缩 */
    height: 40.5%;
    background-color: #88D8B8;
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    z-index: 1; /* 层级低于图片，显示在图片后方 */
  }
}

如果你一定要使用负z-index实现层级，需要给父容器.landing设置一个大于0的z-index（比如z-index: 1），让父容器生成独立的堆叠上下文，此时子元素的负z-index只会在父容器内部排序，不会跑到父容器背景外侧被遮挡。但日常开发中更推荐用正z-index分层的写法，更不容易出现层级混乱的问题。

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