How to move text inside a div?

Question

css

I can not understand how to set the inscription "02", just like in the example above. Can you suggest?
It turns out, only this way:

And in general, did I make up this element correctly?

<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 align="right">02</p>
</ul>
    </div>

css

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

Thanks for the help!

Answer 1

Hello, as an option to use the position property.
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;
}

Answer 2

I think it's better

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

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

      .card h3{
        font-size:50px;
        margin:auto 25px 25px auto;
        position:absolute;
        right:0;
        bottom:0;
        opacity:15%;
      }