CSS绝对定位Div失效求助：子元素未在DOM中显示

我来帮你排查几个最可能的原因——既然你已经给子元素设置了明确宽高和z-index，那问题大概率出在父元素定位、子元素定位坐标，或者样式冲突上：

1. 先确认父元素的position属性是否完整设置 #

你代码里写的position: rela...应该是没写完relative吧？绝对定位的子元素必须依赖明确设置了position: relative/absolute/fixed/sticky的父元素，如果父元素的定位属性不完整，子元素会默认相对于整个文档定位，很可能跑到可视区域外，看起来就像没显示。

先把父元素的定位补全，顺便加个背景色方便你确认父元素的范围：

.first_customer, .all_customer {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 必须完整设置这个属性 */
  background: #f5f5f5; /* 临时加背景，方便确认父元素区域 */
}

2. 给绝对定位子元素加上明确的定位坐标 #

你要把子元素放在左上角和右上角，必须给它们设置top/left、top/right属性，不然子元素会留在原来的文档流位置，可能被父元素的flex布局挤出去或者重叠到看不见。

假设你的子元素类是.top-left-item和.top-right-item，可以这么写：

.top-left-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px; /* 你的明确宽高 */
  height: 40px;
  background: #ff4444; /* 临时加背景，确认元素存在 */
}

.top-right-item {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 40px;
  background: #33b5e5; /* 临时加背景，确认元素存在 */
}

3. 检查父元素的overflow属性 #

如果父元素被设置了overflow: hidden，而子元素的定位刚好超出父元素范围（比如没设置坐标时的默认位置），就会被直接隐藏。可以先去掉这个属性，或者调整子元素的定位坐标。

4. 排查是否有样式覆盖 #

打开浏览器开发者工具（F12），选中子元素，在Elements -> Styles面板里查看：

• 子元素的position: absolute是否生效，有没有被划掉（被更高优先级的样式覆盖）；
• 有没有被设置display: none或者visibility: hidden。

最后验证步骤 #

1. 先给父元素和子元素都加背景色，直观看到元素的位置和范围；
2. 确认父元素的position: relative已经正确设置；
3. 给子元素加上明确的top/left或top/right坐标；
4. 用开发者工具检查元素的盒模型，确认宽高、定位属性都正常生效。

按这个步骤排查，应该就能找到问题所在啦！

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