在div的右上角放置一个image/icon

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

将位置设置为相对于父级 div 开始。这可能会解决您的问题..

Answer 2

尝试将您的 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 3

您需要在容器上设置 position: relative，这会告诉绝对定位的 child 将自身定位到什么。

在 child 上，您可以删除 margin-left 和 margin-top 值并将其定位为 top 和 right

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

在div的右上角放置一个image/icon

Place an image/icon in the upper right corner of a div

html

css

sass

less