Z-Index不适用于我的Magento主题

Question

我的网页上有z-index的问题，我需要将购物底部移动到顶部-100px但是当我尝试按钮松开动作不再起作用时，我尝试使用z-index：99999但不是也工作，我需要一些帮助！这里我的页面链接limitx.panamerik.net

---- ----- IMAGES

这是真实的形象：

我需要这样做：

Answer 1

更新：再次查看屏幕截图后，我意识到您要显示产品图片右侧的按钮。我不确定这是不是一个好主意，因为这个主题是有回应性的。

但如果你真的，真的，真的想要这样做，那么你可以尝试将以下<CSS>添加到你的custom.css文件中：

@media only screen and (min-width: 768px) {
    .products-grid .actions {
        margin: 0;
        position: absolute;
        top: 100px;
        right: -25px;
    }
    .owl-wrapper {
        z-index: 1;
    }
    .slider-arrows1 .owl-controls .owl-buttons .owl-prev, .slider-arrows1 .owl-controls .owl-buttons .owl-next {
        z-index: 2;
    }
}

当您将鼠标悬停在按钮上时，这将在下面的屏幕截图中看到。

由于主题的反应性，我添加了@media only screen and (min-width: 768px)。否则，当浏览器视口变小时，按钮将与图像重叠。您可能希望使用此设置稍微玩一下，并且也应该在某些移动设备上进行测试。

要详细了解此信息，请参阅this question。

---

  

编辑：我会在下面留下原来的答案，以防万一   将来对其他人有帮助......

我看到你使用Infortis Ultimo主题，这是一个很好的选择。我认为您不应该使用<CSS>来移动按钮。最好将整个<div class="actions"></div>移到顶部。

结果如下：

您可以通过对以下文件进行一些更改来完成此操作：

app/design/frontend/ultimo/default/template/catalog/product/list.phtml

在第273到289行（取决于主题版本）的某处，您可以找到以下代码：

<div class="actions clearer<?php echo $actionsClasses; ?>">

    ....

</div> <!-- end: actions -->

  

注意：最好先将整个list.phtml文件复制到您自己的子主题   并在那里做出改变。

在您的子主题list.phtml文件中，只删除我上面提到的部分，然后将其移到文件第216行的某处。

在<list class="item">元素开头之后和<div class="product-image-wrapper"....>之前粘贴它，就像这样：

<li class="item">

    <!-- PUT THE CODE HERE -->

    <div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">

另外，请不要忘记在custom.css样式表中添加：

.products-grid .actions {
    margin: 0 0 10px;
}

这应该可以帮到你！

Answer 2

您使用最高值为负数表示以下可能存在问题：

1. 将父div设置为overflow:hidden;并且不显示该元素，即隐藏在父div后面的元素。 （从父级中移除overflow:hidden）

2. z-index值不起作用？你没有明确宣布这个职位。 （设置position:relative或绝对）