html - 绝对定位到 img 的 Div 不应移动

Question

我遇到了以下问题:父亲内部有两个 sibling div，一个有一个图像(位置相对和类 home-image)，另一个(位置绝对和 box-circle)有一个 child (一个名为 div白色圆圈，图像后面有一个圆圈，绝对位置)。我的问题是:当我改变分辨率时，圆圈应该留在图像后面并移开。

这是相对的CSS:

.box-circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
.home-image{
  z-index: 10;
}
.relative{
  position: relative;
}
.white-circle{
      position: absolute;
    width: 25rem;
    height: 25rem;
    background-color: #FFFFFF;
    border-radius: 50%;
  top: 12rem;
    right: 8rem;
}

Answer 1

z-index CSS 属性指定了 positioned 元素的 z-order，因此将 position 属性插入到 .home-image 中，例如这个:

.home-image{
  z-index: 10;
  position:relative;
}