如何在引导卡的右上角设置IMG？

Question

我尝试在引导卡（覆盖卡）的右上角设置图像。我将图像定位在绝对位置。我认为这就是问题所在。如果更改屏幕尺寸，则图像位于旧位置，但卡已移动。即使更改屏幕尺寸，如何将图像固定在角落？

结果应如下所示：

谢谢！

#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

试试这个代码

#hat {
      float: right;
      margin-top: 0px;
    }

 
 <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">
        <div class="card mb-4">
          <div class="card-header text-center" style="padding: 0px;">
            <img id="hat" src="https://via.placeholder.com/50" alt="hat">
            <h3 style="padding: 14px;">
              Text
            </h3>
          </div>
          <div class="card-body">
            <p>Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

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

解决方案

我已经设置top和right属性#haton 0- 这意味着我已经将它放在右上角。在那之后，我已经申请transform: translate(50%,-50%);将其移动其自身大小的 50%（将其居中到右上角），并#santabox通过设置position-relativeclass来建立相对关系。

#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>