在 Bootstrap 中以一定的精度将图像定位在彼此之上答案

【问题标题】：Position images on top of each other with some precision in Bootstrap在 Bootstrap 中以一定的精度将图像定位在彼此之上
【发布时间】：2018-10-20 17:25:19
【问题描述】：

我正在尝试以某种程度的精确度将两个图像放在一起。

问题是，顶部的图像（圆圈）到处都是。

两个图像都在响应式网格中，并且基础图像应该始终居中。

假设，例如，我试图瞄准臀部。

每当我缩小页面时，右图会出现在下方（这正是我想要的），而圆圈会出现在其他地方（在本例中是手）。

这是我的代码：

/* No-margins Class Rules */

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


/* Centers content */

.centered-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.img-container {
  background-color: yellow;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.test {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 100px;
}

<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
</head>

<body>
  <div class="container">
    <!-- global canvas -->
    <div class="row no-gutters">

      <div class="col-sm">
        <div class="centered-img">

          <img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
          <img src="./images/circle.png" class="test" alt="Responsive image">

        </div>
      </div>

      <div class="col-sm">
        <div class="centered-img">
          <img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
        </div>
      </div>

    </div>
  </div>
  <!-- global canvas -->
</body>

</html>

如何将红色圆圈放置在人的顶部，以便在我拉伸或收缩页面时始终保持在同一位置？

非常感谢您。

【问题讨论】：

你试过玩 position: relative;适合你的圈子？
此外，类 .img-container {} 永远不会在您的 html 中使用。不知道你是否意识到这一点。
我是。这是我测试的一部分。但是谢谢;)

标签： html css bootstrap-4

【解决方案1】：

我猜你的两张图片使用不同的参考点来确定它们的位置。此外，要使其响应，您需要以百分比表示所有内容。

第一部分。通过在您的圈子上设置position:absolute，您将其参考点更改为上一个设置了position:relative 或position:absolute 的容器。在您的情况下，没有，因此它使用页面，整个文档作为其参考点。如果圆圈有页面的参考点，并且图像有其父级的参考点，当你调整大小时，它们将锚定到不同的点，你永远不会让它们对齐。

此外，由于您希望它具有响应性，因此您的所有测量值都需要以 % 为单位。 left:100px 设置在您的圈子上，当您开始调整大小时，它将不起作用。您需要使用transform 属性获取确切位置，或者将left 属性更改为百分比。

【讨论】：

谢谢。您的反馈帮助很大。这很明显，现在我想起来了。我只是不习惯 html 和 css。