html - 将具有不同样式的文本重叠在图像上，防止一种样式的文本显示在另一种样式的文本之上

Question

我知道如何在图像上放置一些文本，但是当该文本包含不同的类、不同的文本样式时，文本行会一个接一个地重叠。

这是只有一种文本样式的简单 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

Answer 1

它们重叠的原因是因为它们具有相同的定位:

top: 6px; 
left: -8px; 

和绝对定位元素往往会相互重叠。

因此您可以创建一个 div 包装器并将 p 标签放入其中:

<div class="textWrapper">
   <p class="auto-style2"><span lang="es">yada yada</span></p>
   <p class="auto-style1"><span lang="es">bla bla bla</span></p>
</div>

CSS:

.textWrapper{
    position: absolute;   
    top: 6px; 
    left: -8px; 
}

确保从 <p> 中删除绝对位置标签