Как поместить иконку повех артикля?

Question

[Alexandriski]

карточка сделана с помощью артикля, не могу понять как можно поверх нее поместить данную иконку, спасибо за помощь

Comments

[Евгений Залецкий]

Дай свой код, как ты это сделал.

[xdevelx]

Абсолютное позиционирование еще не проходили?

[Ankhena]

Иконка - псевдоэлементом.
Позиционирование - абсолютом.

Answer 1

[Александр Варлаков]

Блоку со статьей position: relative;
Иконке:
posiiton: absolute;
left: 0;
top: 0; - разместит в левом верхнем углу

Чтобы иконка на половину выходила за блок (это для примера), добавь:
tranform: translate(0, -50%);

Answer 2

[Alexander3928]

Просто укажи left, top отрицательные значения

.first {
position: relative;
width: 350px;
height: 350px;
background-color: red;
margin: 100px auto;
}

.second {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
position: absolute;
left: -50px; // 50% от шарика
top: -50px; // 50% от шарика
}

Answer 3

[Skaizy]

Пример:

.first {
position: relative;
width: 600px;
height: 600px;
background-color: red;
}
.second {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
}