绝对定位到 img 的 Div 不应该移动答案

【问题标题】：Div positionated absolute to img should't move绝对定位到 img 的 Div 不应该移动
【发布时间】：2018-05-24 16:50:50
【问题描述】：

我遇到了以下问题：父亲中有两个兄弟 div，一个有一个图像（位置相对和类 home-image），另一个（位置绝对和 box-circle）有一个孩子（一个名为白色圆圈，图像后面有一个圆圈，位置绝对）。我的问题是：当我改变分辨率时，圆圈应该留在图像后面并移开。

这是相对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;
}

【问题讨论】：

不要用文字来描述你的 HTML 结构，你应该分享那部分代码，这样会更清晰
你能分享你的代码来帮助你吗
请用最少的标记和样式创建一个小提琴来显示问题。圆圈应该如何以及在哪里移开？
我没有分享，因为我正在使用带有显着性的wordpress并且我提供了一堆代码，无论如何现在我会分享

标签： html css

【解决方案1】：

z-index CSS 属性指定定位元素的 z 顺序，因此将position 属性插入.home-image，如下所示：

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

【讨论】：

@Kaddath，嗨，我的朋友，div 在问题号 image 中被描述为“位置相对和类家庭图像”。他描述有两个兄弟姐妹 div。
我的错，这就是我要求 OP 澄清 HTML 的原因

【解决方案2】：

请试试这个。

.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;
}

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

【讨论】：