Multiple links in a block (pictured)?

Question

css

Good to everyone. Please advise the correct solution. There are 6 adaptive image blocks. Each picture should have from 1 to 3 links on the inscriptions of the site .
the code

spoiler

<div class="listb">
<div class="listb-item">
<img src="http://englishprogress.ru//upload/000/u1/1b/41/kursy-angl.png" alt="" width="347" height="185" />
  <a href="/"></a>
  <a href="/"></a>
  <a href="/"></a>
</div>
<div class="listb-item"><img src="http://englishprogress.ru//upload/000/u1/b7/6e/kursy-kitaiskogo.png" alt="" width="279" height="185" />
  <a href="/"></a></div>
<div class="listb-item"><img src="http://englishprogress.ru//upload/000/u1/2d/72/razg-klub-dlja-vzros.png" alt="" width="279" height="185" />
  <a href="/"></a></div>
<div class="listb-item"><img src="http://englishprogress.ru//upload/000/u1/20/1e/letnii-klub.png" alt="" width="347" height="185" />
  <a href="/"></a></div>
<div class="listb-item"><img src="http://englishprogress.ru//upload/000/u1/a5/42/kursy-za-rubezhom.png" alt="" width="279" height="185" />
  <a href="/"></a></div>
<div class="listb-item"><img src="http://englishprogress.ru//upload/000/u1/4b/98/fotogalereja.png" alt="" width="279" height="185" />
  <a href="/"></a></div>
</div>
<p><style type="text/css">
.listb
{
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
-webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
.listb-item
 {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
padding:0 15px 15px 0;
 }
</style></p>

and for some reason after saving the links disappear from the code. I understand that you need to set styles for links, I tried it in different ways, it doesn’t work out ...

Answer 1

It seems he figured it out. added to styles

spoiler

.listb1
{
position: absolute;
top:90px;
left:10px;
}
.listb11
{
position: absolute;
top:90px;
right:30px;
}
.listb111
{
position: absolute;
top:135px;
left:20px;
}

Added three transparent links to the div with class listb1