將圖片/圖標放在div的右上角

Question

我想在div的右上角放置一個圖像，該圖像始終停留在該位置並且始終移動（在不同的視口尺寸下）。

這是我的較少代碼和相關HTML的當前狀態：

減：

.selling,
.price,
.cta {
    float: left;
    width: 33.33%; min-height: @height;
    padding: 0 1%;
    .font-size(18px);

    & > div,
    & > a {
        // min-height: @height;
        height: @height;
        padding: 14px 22px;
        background-color: @black;
        color: #fff;
    }

    &.rabattaktion {
        div::after {
            position: absolute; z-index: 1;
            width: 68px; height: 65px;
            background: transparent url('../img/santa_hat.png') center top no-repeat;
            content: "";
            margin-top: -170px;
            margin-left: 351px;
            }   
            div:hover:before { z-index: 4; }                
        }
}

HTML：

<div class="offer">
   ...
    <div class="price sh <?php if($entry->field('rabattaktion')->value()): ?> rabattaktion<?php endif ?>">
        <div>
            <h3>Gesamtpreis:</h3>
            <p><span><?php echo $new_price_formatted; ?> € *</span></p>
            <?php if(isset($rate)): ?>
               <p>
                    <b>Ratenzahlung:</b>
            <?php echo $raten; ?> Monatsraten á <?php echo $rate_formatted; ?> € *
                </p>
            <?php endif; ?>
        </div>
    </div>
    ...
</div>

這樣，我就在右上角得到了圖片。 但是，一旦視口大小更改，該位置就不再正確。

我究竟做錯了什么？

Answer 1

您需要設置position: relative對於容器的位置，這可以告訴絕對定位的孩子將自己定位在哪個位置。

在孩子身上，您可以擺脫margin-left和margin-top值的限制，並使用top和right對其進行定位

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

Answer 2

將位置設置為相對於父div的相對位置。 那可能會解決您的問題。

Answer 3

嘗試將CS​​S編輯為：

.selling,
.price,
.cta {
  float: left;
  width: 33.33%;
  min-height: @height;
  padding: 0 1%;
  .font-size(18px);
  &>div,
  &>a {
    // min-height: @height;
    height: @height;
    padding: 14px 22px;
    background-color: @black;
    color: #fff;
  }
  &.rabattaktion {
    position: relative;
    div::after {
      position: absolute;
      z-index: 1;
      width: 68px;
      height: 65px;
      background: transparent url('../img/santa_hat.png') center top no-repeat;
      content: "";
      top: 0;
      right: 0;
    }
    div:hover:before {
      z-index: 4;
    }
  }
}