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

시도를하여 문제를 해결하는 것입니다 :

.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의 상대 위치로 설정하십시오. 그것은 어쩌면이 당신의 CSS를 편집 할 수 ...

Answer 3

당신은 용기에 position: relative을 설정해야합니다,이에 자리 매김하는 것을 절대 위치 지정된 아이를 알려줍니다. 부모 요소에 relative` : 아이에

, 당신은 당신은`위치를 설정하는 것을 잊었다 top 및 right

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