Question

编辑：我创建了一个JS-Fiddle，它会向您显示代码的运行情况，您可以看到标题的文本是如何重叠的。 https://jsfiddle.net/wj76sv1h/

所以我有一个显示从数据库获取的图像的div列表。这个列表是由PHP创建的，但是当我试图添加一个标题时，你可以从image看到（抱歉我不能直接在帖子中包含图像），它正在重叠另一个李元素的形象。标题是span标记。

我试图改变图像和div的z-index，但似乎没有效果。我也在使用这段代码来使用lis创建网格系统。

function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
    for (var colIndex = 0; colIndex < cols; colIndex++) {
        var x = (colIndex * 100) + "%",
            y = (rowIndex * 100) + "%",
            transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
        rules.push(rulePattern.replace("{0}", ++index) + transforms);
    }
}
var headElem = document.getElementsByTagName("head")[0],
    styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
    styleElem.styleSheet.cssText = rules.join("\n");
} else {
    styleElem.textContent = rules.join("\n");
}
}

如果有人能帮助我，那就太好了。谢谢。这是用于项目/标题的html。

<div class="item" id="item-covert"><span>Caption</span> <div id="item-price"> $54.36</div><img class="item-image" src="image.url"></div>

的CSS：

.item {
  position: relative
}
.item span {
    display: none;
    position: absolute;
    bottom: 0;
    padding: 10px;
    background: rgba(255,255,255,0.99);
    /*top: 20px;
    width: 300px;
    height: 50px;*/
    font-family: Open Sans;
    /*margin-left: 110px;*/
    left: 110px;
}

.item:hover span {
    display: block
}

Answer 1

span的定位将其移动到图像上。向右移动十个像素，看起来很好。 https://jsfiddle.net/yak613/5p3uuzfg/
我对标题文字：）
采取了一些自由还有一些关于酷标题颜色的建议：）

Live Example

图像与另一个li元素中的跨度重叠

1 个答案: