html - 使用 CSS 将文本堆叠在元素上方

Question

我正在尝试实现类似的目标

[ sometext ]     [ someothertext]
 actualtext         actualtext2

但我只得到类似的东西

som[etext    ]        someoth[ertext        ]
          actualtext                 actualtext2

其中 [] 表示放置在背景中的图像。从语义上讲，我想要/需要将堆叠的元素放在一起，例如

<li class="software1">
            <div class="overlay">
                -soft1
            </div>
            20
        </li>

overlay 元素应该是位于 lis 背景前面的实际文本上方的文本。

我构建了一个小型 jsfiddle http://jsfiddle.net/A3VRd/3/显示问题

我想要实现的是让上面的文本实际上位于“正常”文本之上，而不仅仅是提升，而是好像它就在它旁边。

Answer 1

我想有很多方法可以做到这一点。假设您不想使用背景重复(因为您目前已将其设置为无)，那么您需要为您的列表元素提供与您计划使用的背景图像相同的宽度。

这与您的标记类似，但我已将带有背景图像的类应用于包含“覆盖”文本的元素。我还使用了 span 标签，因为它对我来说感觉更自然，但是 li 内部的 div 是有效的，因此您可以根据需要使用它。

HTML:

<aside class="compatibility">
    <ul>
        <li> <span class="software1">Here's some Text</span>20</li>
        <li> <span class="software1">Some Other Text</span>20</li>
        <li> <span class="software1">Text of Another One </span>20</li>
    </ul>
</aside>

CSS:

aside.compatibility ul {
    margin-top: 64px;
    list-style-type:none;
    position: relative;
}
aside.compatibility li {
    display:inline-block;
    padding-top:64px;
    margin-right:20px;
    width: 100px;
    text-align: center;
}
aside.compatibility .software1 {
    background-image: url("http://placehold.it/100x50");
}
aside.compatibility li span {
    display: block;
    background-repeat: no-repeat;
    background-position: center;    
    position:absolute;
    bottom: 20px;
    width: 100px;
    height: 50px;
    padding-top: 10px;
}