Подскажите как можно сделать нечто похожее в верхнем правом углу:
Это делается с помощью position: relative;
или есть более правильное решение?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
Это обычно делаться при помощи псевдоэлементов, таких как before
или after
:
body {
background-color: #f2f2f2;
}
div {
position: relative;
display: inline-block;
font-size: 14px;
color: white;
background-color: #4285F4;
padding: 10px 50px;
border-radius: 10px;
margin: 20px;
}
div::after {
content: "ХИТ";
position: absolute;
top: -12px;
right: -12px;
display: inline-block;
font-size: 8px;
color: initial;
background-color: white;
padding: 12px 8px;
border-radius: 50%;
}
<div>PREMIUM</div>
Это может быть div
, button
, или что то иное, общий принцип все равно будет тот же.