我网站周围边框图像的 z-index 高于按钮，但我希​​望按钮的链接仍然可以点击，尽管 z-index 较低

Posted 2023-03-06

【中文标题】我网站周围边框图像的 z-index 高于按钮，但我希​​望按钮的链接仍然可以点击，尽管 z-index 较低

【英文标题】：The z-index of a border image around my site is higher than a button, but I want the button's link to still be clickable despite having lower z-index

【发布时间】：2021-04-10 22:45:35

【问题描述】：

在https://lostboysfoundgirls.com/studio/ 的移动网站上，有一个图像作为网站周围的边框，并且在这个顶部边框图像下，较低 z-index 上的按钮变得无法点击。显然，我希望按钮在边框图像下直观地滚动，但是在使用 z-index（按钮较低，边框较高）执行此操作时，由于 z-index 定位，不会启动链接点击。

另一个类似问题的例子是http://lowlifeclothing.co/，主页上显示了多张图片。它们都是带有链接的可点击图像。主页上的所有图片都在同一个 z-index 上，但有些图片相互重叠，导致其他图片无法点击。

如何使图像中的所有链接在发生这种重叠的情况下正常工作？我可以让可点击的链接始终优先考虑，尽管图像重叠或具有较高 z-index 的边框图像或两个链接重叠的图像？

【参考方案1】：

您可以在按钮中添加以下 css

.elementor-button-link 
    position: absolute;
    width: 200px !important;
    z-index: 999;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;

此解决方案的唯一缺点是您必须为按钮设置固定宽度，否则它将 100% 显示为其父级。