绝对定位为img的div应该移动

Question

我遇到了以下问题：父亲中有两个兄弟姐妹，一个是图像（位置相对和类主图像），另一个是（位置绝对和盒子圆）带有一个孩子（一个叫做div的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属性指定定位元素的z顺序，因此将position属性插入.home-image，如下所示：

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

Answer 2

请试一试。

＆＃13;

＆＃13;

.home-image{
	z-index: 10;
  position: relative;
  display: block;
  text-align: center;
  margin: 50px auto  auto;
  text-align: center;
}
 
.white-circle{
    position: absolute;
    width: 25rem;
    height: 25rem;
    background-color: red;
    border-radius: 50%;
   	top: 20px;
    right: 0;
	left: 0;
	margin: 0 auto;
}

＆＃13;

<div class="home-image"><img src="https://i.stack.imgur.com/12F8N.png"></div>
 
<div class="white-circle"> </div>

＆＃13;

＆＃13;

＆＃13;