divの右上隅にイメージ/アイコンを配置

Question

常にその場所にとどまり常に移動する（異なるビューポートサイズで）divの右上隅にイメージを配置したいと思います。

LESS：ここ

は私の少ないコードの現在の状況と関連した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

はこれにあなたのCSSを編集するようにしてください。..あなたの問題を解決します：

.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; 
    } 
    } 
} 

Answer 2

親divの相対位置を先頭に設定します。それは多分

Answer 3

あなたは、コンテナにposition: relativeを設定する必要があります、これはに対して自分自身を配置するためにどのような絶対的な位置付け子に伝えます。親要素にrelative`：子で

は、あなたが `位置を設定するのを忘れ topと right

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