在 div 中将具有高 z-index 的 .png 居中

Question

我希望 .png 图像 1) 恰好位于 div 的中心，无论设备大小如何，以及 2) 位于同一 [=27] 中另一个 .png 图像的上方=].这是我的 html:

 <div class="col-sm-6">
   <div id="spinningDial">
     <img src="redphone.png" id="phone"/>
     <img src="RadialSlime.png" id="radial" class="rotate" style="width: 100%;">
   </div>
</div>

这是我的 CSS:

 #phone {
      position: absolute;
      left: 67%;
      top: 45%;
      z-index: 10;
      opacity: 100%;
      width: 200px;
      }

redphone.png 是我在上面的规范中提到的图像。

使用位置：绝对；和 z-index: 10;似乎是我让 .png 位于其他图像之上的唯一方法，但它似乎将它放在 div 之外。而使用 position: relative;使用相同的 z-index 将 png 替换在另一个图像上方，但将其包含在相同的 div.

中

这是 web page，如果有人想查看页面源代码并查看所有代码。

Answer 1

您可以尝试将 left 和 top 调整为 50%，但也可以添加 transform: translate(-50%, -50%);。结果：

 #phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
}

 <div class="col-sm-6">
   <div id="spinningDial">
     <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" id="phone"/>
     <img src="https://cdn.i-scmp.com/sites/default/files/styles/landscape/public/d8/yp/images/shutterstock_259160825.jpg?itok=y8bw_02m" id="radial" class="rotate" style="width: 100%;">
   </div>
</div>

Answer 2

你需要的是放置相对于父级的位置以将父级作为修复。然后将顶部和左侧的位置设置为 phone 的 50%，如您所见，由于图片尺寸的原因，该位置并不完全位于中心。要解决此问题，您可以使用变换将顶部和左侧的图片尺寸缩小一半。

最后，你会在 CSS:

#spinningDial {
      position: relative;
}

#phone {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      opacity: 100%;
      width: 200px;
}

在 div 中将具有高 z-index 的 .png 居中

Centring a .png with a high z-index within a div

html

css

png

z-index

bootstrap-5