html - 画像の上に異なるスタイルのテキストを重ねて、あるスタイルのテキストが別のスタイルのテキストの上に表示されるのを防ぎます

Question

画像の上にテキストを配置する方法は知っていますが、そのテキストに異なるクラス、異なるテキスト スタイルが含まれていると、テキスト行が重なり合ってしまいます。

機能するテキスト スタイルが 1 つだけの単純な HTML コードを次に示します。

<li style="" class="portfolio-content-CV">
    <div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
    </div>
</li>

動作しないコードは次のとおりです。

<li style="" class="portfolio-content-CV">
<div class="contentCV"><img src="images/backgr.png" height="500" width="510">
        <p class="auto-style2"><span lang="es">yada yada</span></p>
        <p class="auto-style1"><span lang="es">bla bla bla</span></p>
    </div>
</li>

css は次のようにフォーマットされます。

#portfolio-list .portfolio-content-CV a{
    width: 510px;
    float: left;
    height:500px;
    display:?table;
    border:0.5px solid grey;
}

.contentCV {
    width: 510px;
    position: relative;
    float: left;
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    background: #FFF;
    border: 0px solid #E2E2E2;
    margin-right: 10px;
    margin-bottom: 10px;
    display:table-cell;
    vertical-align:bottom;
}

.contentCV a.titlesmall {   display: none; }

.auto-style2 {
    margin-left: 20px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

.auto-style1{
    margin-left: 16px;
    font-family: "AGENCYR";
    font-size: 0.5em;
    position: absolute;   
    top: 6px; 
    left: -8px; 
    width: 100%;
    color: #000000;
}

さまざまなテキスト スタイルを持つ複雑なテキストを画像の上に重ねる方法を教えてください。o_O