html - 画像上のテキスト

Question

画像の上にテキスト ブロックを作成しようとしていますが、最初の画像では正常に動作しますが、同じコードで別の div を追加すると、2 番目の画像のテキスト ブロックが 1 番目の画像に配置されます。

私の例があります：

  <section>
        <div>
            <img src="">
            <p><span>Text Example 1</span><p>
        </div>
        <div>
            <img src="">
            <p><span>Text Example 2</span><p>   
        </div>

そして今、CSS:

img {
    position: relative;
    width: 100%;
}

p {

    position: absolute;
    top: 10%; 

width: 100%;

 }

 p span {

    color: white; 
    font: 1.75em Helvetica, Sans-Serif;   
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 0.625em; 
 }

問題は絶対位置に関係していると思いますが、よくわかりません。

ありがとう