css - 如何在 Bootstrap 卡片的右上角设置 IMG？

Question

我尝试在 Bootstrap 卡的右上角设置图像(覆盖卡)。我用绝对位置定位图像。我认为这就是问题所在。如果我更改屏幕尺寸，图像位于旧位置但卡片移动了。如何在更改屏幕尺寸的情况下将图像固定在 Angular 落？

结果应该是这样的:

谢谢!

#hat {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 420px;
  top: -25px;
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid mt-2">
  <div class="row justify-content-center">
    <div class="col-md-7 col-lg-8 col-xl-7 mt-md-5">
      <div id="santabox">
        <img id="hat" src="https://via.placeholder.com/50" alt="hat">
        <div class="card mb-4">
          <div class="card-header text-center">
            <h3>
              Text
            </h3>
          </div>
          <div class="card-body">
            <p>Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您正在尝试通过绝对值为 420px 的左属性移动绝对图像 #hat。如果你想把它放在右 Angular ，你必须使用 left: 100% 或 right: 0。你也想要 #santabox 是相对的。

---

解决方案

我已经在 0 上设置了 #hat 的 top 和 right 属性 - 这意味着我已经把它放在右上角。在那之后，我应用了 transform: translate(50%,-50%); 将它移动到它自身大小的 50%(将它居中到右上角)并且我已经通过设置 position-relative 类使 #santabox 相对。

#hat {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%,-50%);
  z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid mt-2">
  <div class="row justify-content-center">
    <div class="col-md-7 col-lg-8 col-xl-7 mt-md-5">
      <div id="santabox" class="position-relative">
        <img id="hat" src="https://via.placeholder.com/50" alt="hat">
        <div class="card mb-4">
          <div class="card-header text-center">
            <h3>
              Text
            </h3>
          </div>
          <div class="card-body">
            <p>Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>