在div

Question

我想在div的右上角放置一个图像，该图像始终位于该位置并始终移动（以不同的视口大小）。

以下是我的较少代码和相关HTML的当前状态：

LESS：

.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上将position设置为relative以开始。这可能会解决你的问题..

Answer 3

尝试编辑你的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;
    }
  }
}