CSS HTML无法点击链接

Question

我有这个页面：http://artendijen.com/product/animals-stream/，右侧有链接，但我无法点击它们...有人知道为什么吗？

左侧：

<nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendijen.com">Home</a> / <a class="home" href="/shop">Gallery &amp; Shopping</a> / <a href="http://artendijen.com/product-category/small/#108">Small</a> / Animals by the Stream</nav>

右侧：

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li><li><a href="/cart">Cart</a></li></ul>`

左侧的CSS：

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb {
    float: left;
    z-index: 99999;
    position: relative;
    margin: 0 0 1em;
    padding: 0;
    font-size: .92em;
    color: #777;
}

右侧的CSS只需使用float right，但这是右侧列表项的CSS：

.shoppingBread li {
    padding-bottom: 5px;
    text-align: right;
}

- user1269625

Answer 1

列表如下：

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li></ul>

被位于其后的 div 遮挡住了。将以下 CSS 添加到您的列表中，它就可以被点击：

position: relative;
z-index: 1;

或者，您可以清除列表后面的div：

<div itemscope="" itemtype="http://schema.org/Product" id="product-108" class="post-108 product type-product status-publish hentry instock">

通过添加 clear: both;。

- j08691

---

或者移除 float:right，这样也可以，因为它们是通过 text-align:right 对齐的。 - Josh Crozier

@JoshC - 我正在更新我的答案，提供第二个解决方案，它清除了浮动列表，这与你刚才建议的几乎相同 ;) - j08691

Answer 2

从你的 CSS 中删除以下内容：

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product {

    position: relative;  ///Remove this 
} 

- Ani

Answer 3

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product {
margin-bottom: 0;
position: relative;
}

删除 position: relative; 就可以了，这不会影响布局。

- Kate McCubbins

Answer 4

你的<header>元素重叠在链接上，导致无法悬停或点击链接：

看看重构你的标记或使用[z-index]来使包含链接的元素位于<header>上方。

你还可以从CSS中删除position: relative这一行，尽管这可能会产生其他意想不到的连锁反应:

.woocommerce div.product, .woocommerce-page div.product, .woocommerce #content div.product, .woocommerce-page #content div.product

- johnkavanagh