Make <span> dont overlap each other-CodePudding

How can I make the dont overlap each other on the thumbnail image?

Supposedly the span stay on their on their own image like this

Here is my CSS

.date-img {
    text-transform: uppercase;
    font-weight: bolder;
    color: #054a8f;
    position: absolute;
    z-index: 2;
    left: 5px;
    top: 90px;
    line-height: 1;
    font-size: 25px;
    margin-top: 5px;
}

Here is my HTML code

<li >
 <span > 19 <br>Oct</span>
<div >
<div > 
<img src="https://event-mbpp.aidan.work/components/com_rseventspro/assets/images/events/thumbs/100/450a0c399c52f59dfc867bf413a6951d.jpg" alt="Program City Walk" width="70">
</div>
</div>
<a target="_blank" href="/index.php/ms/component/rseventspro/event/1-program-city-walk?Itemid=101">Program City Walk</a> <br>
<small>Wednesday, October 10, 12:00 AM - 12:00 AM</small>
</li>

You can also refer here - https://event-mbpp.aidan.work/

CodePudding user response：

i have gone through link

just change css class as,

.date-img {
    text-transform: uppercase;
    font-weight: bolder;
    color: #054a8f;
    position: relative;
    z-index: 2;
    left: -117px;
    top: 25px;
    line-height: 1;
    font-size: 25px;
    margin-top: 5px;
}

CodePudding user response：

You are using position: absolute, which makes them overlap, as they are absolutely positioned. Right now, any siblings will be overlapped.

But absolute refers either to the page, or to the closest parent item that has a position rule applied.

So a quick and dirty fix will be setting your list items' position to relative: this will make the subsequent absolute rule refer to their container (you may have to adjust the offsets though):

.rsepro_upcoming li {
  position:relative;
}

Note that the position:relative is the default for lists so it shouldn't have other side effects.

A better approach would be using flex.