CSS HTML Cant点击链接

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只是向右浮动，但这里是右侧列表项的CSS：

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

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;

Answer 2

从css中删除以下内容：

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

    position: relative;  ///Remove this 
} 

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;，它会起作用。它似乎没有影响布局。

Answer 4

您的<header>元素与链接重叠，因此链接无法悬停或点击：

查看重构标记或使用[z-index][2]获取包含<header>上方链接的元素。

您也可以删除CSS中此位置的相对位置：相对，但这可能会产生其他意外的连锁效应：

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