html 画像　文章重ね

前提

あるページの一部にリンクを誘導するための画像を作成している。
文章をまとめたスプレッドシートから文章を抜き出し、配列に収納してHTMLを渡す構造にしている。
pickData=[画像のアドレス][画像クリック時のリンク先][要素①(テキスト)][要素②(テキスト)]
上記の配列をhtmlに返して(return)作成している。
画像の読み込みはうまくいったが、文章の配置がイメージ通りにならず、重なる。

実現したいこと

・添付画像参照
・画像の右上から少し離れた位置に、要素①要素②が上下に連なる文章を表示させたい
・位置調整はピクセル単位ではなく、％で調整したい
・そのためのコードやタブの分け方について質問したい。

発生している問題・エラーメッセージ

・要素①要素②が同じ位置で重なりあっている。
(一部コードは参考サイトから引用しているため、意味のないコードもあることは認識しているが、取捨選択が出来ない。)

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6
7  </head>
8  <body>
9    <ul class = "item_wrapper rank2">
10        <div class = "box">
11          <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><img src="<?= pickData[0] ?>"></a>
12          <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><p><?= pickData[2] ?></p></a>
13          <a href="<?= pickData[1] ?>" target="_blank" rel="noopener"><p><?= pickData[3] ?></p></a>
14        </div>
15    </ul>
16  </body>
17</html>

CSS
1<style>
2html,
3body {
4  font-size: 12px;
5  height: 100%;
6  margin: 0;
7}
8
9.box{
10  position: relative;
11
12}
13
14.box a{
15/* height: 600px; */
16width: 40%; 
17
18}
19
20.box p {
21 position: relative;
22  color: white;
23  text-shadow: 
24    2px  2px 10px #777 ,
25    -2px  2px 10px #777 ,
26    2px -2px 10px #777 ,
27    -2px -2px 10px #777;
28  font-family :Quicksand, sans-serif;/*Google Font*/
29     top: 20%;
30    left: 20%;
31    -ms-transform: translate(-50%,-50%);
32    -webkit-transform: translate(-50%,-50%);
33    transform: translate(-50%,-50%);
34    margin:0;
35    padding:0;
36}
37
38
39.box img{
40  width: 50%;
41  height: auto;
42
43}
44
45.item_wrapper {
46  list-style-type: none;
47  display: -ms-flexbox;
48  display: flex;
49  flex-wrap: wrap;
50  padding: 0;
51  margin: 0 1vw 1vw;
52}
53
54.item_wrapper li {
55  width: calc(100% / 3 - 2 * 1vw);
56  margin: 1vw;
57}
58
59.item_wrapper img{
60  vertical-align: bottom;
61  /*　画像の位置情報について。今回はbottomに配置*/
62}
63
64.rank2 li {
65  counter-increment: rank;
66  position: relative;
67  overflow: hidden;
68}
69
70</style>