Alexandriski

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

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

Просто укажи 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% от шарика
}

Пример:

.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%);
}

Здравствуйте, как вариант использовать свойство position.

HTML

<div class="card">
      <img class="top-img" src="img\fon.png" width="480" height="180" />
      <h2>Базовый HTML</h2>
      <ul>
        <li>Базовые теги</li>
        <li>Теги картинок и ссылок</li>
        <li>Теги таблиц</li>
        <li>Служебные теги</li>
        <li>Кодстайл HTML</li>
        <p class="some-text">02</p>
      </ul>
    </div>

CSS

.card {
  background-color: white;
  width: 480px;
  height: 500px;
  box-shadow: 2px 4px 9px -4px #000000;
  position: relative;
}

.some-text {
  position: absolute;
  right: 0;
  bottom: 0;
}