html - 在 div 的右上角放置一个图像/图标

Question

我想在 div 的右上角放置一个图像，该图像始终停留在该位置并始终移动(以不同的视口(viewport)大小)。

这是我的 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>

这样我就得到了右上角的图片。但是一旦视口(viewport)尺寸改变，位置就不再正确。

我做错了什么？

Answer 1

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

在 child 身上，你可以去掉 margin-left 和 margin-top 的值，并用 top 和 right 定位它

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