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

InFlames82 1 css twitter-bootstrap

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

结果应如下所示:

谢谢!

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

Madhubabu Ya.. 9

试试这个代码

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