我想在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>
通过这种方式,我得到了右上角的图片。但是,只要视口大小发生变化,位置就不再正确。
我做错了什么?
答案 0 :(得分:2)
你需要在容器上设置position: relative
,这会告诉绝对定位的孩子要对自己定位什么。
在孩子身上,您可以摆脱margin-left和margin-top值,并将其定位为top
和right
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
答案 1 :(得分:0)
在父div上将position设置为relative以开始。这可能会解决你的问题..
答案 2 :(得分:0)
尝试编辑你的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;
}
}
}