如何让带selected类的.child元素置于其他.child元素上层（不修改定位属性）

没问题，针对你的需求——不修改HTML结构、不改变.parent和.child的position属性、父元素样式仅一次性设置，只通过子元素的类/样式调整来实现层级提升，这里有两种可靠的实现方式：

方法1：用z-index直接调整堆叠顺序 #

你的.parent是position: absolute但默认没有设置z-index（值为auto），这种情况下不会创建独立的堆叠上下文，所以.child的z-index会直接作用于全局的堆叠上下文。我们只需要给选中的子元素加个更高的z-index值就行：

/* 父元素样式保持你原有的设置，无需修改 */
.parent { 
  position: absolute; 
} 
.child { 
  position: relative; 
}

/* 给选中的子元素新增样式 */
.child.selected {
  z-index: 1;
}

原理：默认状态下的.child的z-index等价于0，给.selected类设置z-index:1后，它的视觉层级会自动高于其他默认的.child元素，哪怕它所在的.parent在DOM里更靠前。

方法2：用3D变换触发层级提升 #

如果不想用z-index，也可以通过3D变换来让选中的元素“浮”到上面，这种方式不会影响任何布局，也完全符合你的限制条件：

.parent { 
  position: absolute; 
} 
.child { 
  position: relative; 
}

.child.selected {
  transform: translateZ(1px);
  /* 可选：如果遇到不生效的情况，加上这句确保3D上下文生效，大部分场景下不加也没问题 */
  /* transform-style: preserve-3d; */
}

原理：当元素应用3D变换时，浏览器会为它创建一个新的堆叠上下文，并且这个元素的视觉层级会天然高于未应用3D变换的元素，同时完全不会改变position属性。

这两种方法都完美满足你的所有要求，你可以根据自己的喜好选择其中一种来实现~

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