购物车图标无法点击

Question

我正在使用 this 文章中的代码为我的 Wordpress 网站上的 woocommerce 插件添加购物车。尝试在我的主题中实施时，我遇到了此代码的两个问题：

购物车图标不可点击，即使 link 是正确的当前的。 css 代码有点问题 header[role='banner']:before 是导致此问题的原因，但我一直没能解决..
其次，cart-contents-count应该放在购物车旁边同一条线上，如图所示，而不是像现在这样。

最终结果应该与此类似：

我已经复制并隔离了下面的代码：

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

header[role='banner'] {
  height: 100px;
  background-color: yellow;
  top: 0px;
  width: 100%;
  z-index: 10000;
  border-bottom: 1px solid #ccc !important;
}


/* SOME THING HER CAUSES THE CART TO BECOME UNCLICKABLE*/

header[role='banner']:before {
  display: block;
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.02);
  z-index: 0;
}

#main-nav-wrapper {
  display: block !important;
  margin-top: 10px;
}

.nav {
  float: right;
  clear: none;
  border: 0;
  margin: 0px;
  z-index: 100;
  display: block;
  list-style: none;
  margin-top: 30px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.nav li {
  float: left;
  position: relative;
}

.nav li a {
  padding: 0px 20px !important;
  display: block;
  text-decoration: none;
}

.nav li a:after {
  content: '';
  width: 1px;
  height: 15px;
  background-color: #e8e8e8;
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
}


/* CART */

.cart-contents:before {
  font-family: 'FontAwesome';
  font-size: 28px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  padding-right: 5px;
  vertical-align: bottom;
}

.cart-contents:hover {
  text-decoration: none;
}

.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline;
}

.cart-placement {
  float: right;
  display: inline-block !important;
  line-height: 100px;
  padding: 0;
  z-index: 20000;
}

.cart-placement {
  float: right;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: inline-block;
  line-height: 50px;
  padding: 0;
position:relative;
}

a.cart-contents {
  color: #ff7454 !important;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<header class="header" role="banner">
  <nav role="navigation">

    <div class="cart-placement">

      <a class="cart-contents" href="http://www.bbc.uk.co" title="add to cart"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>


                      <div class="cart-contents-count">1</div>
                  </a>


    </div>


    <div id="main-nav-wrapper">
      <ul class="nav main-nav clearfix">
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Home</a></li>

        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">About</a></li>

        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Contact</a></li>

      </ul>
    </div>
  </nav>
</header>

JSFIDDLE 处的相同代码。

Answer 1

像这样将 before 元素的 z-index 更改为 -1 ：

header[role='banner']:before{
    z-index: 0;
    ...
}

Answer 2

请添加position:relative；在 .cart-placement 这个 class

.cart-placement {
  float: right;
  padding-top: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  display: inline-block;
  line-height: 50px;
  padding: 0;
  position:relative;
}

Answer 3

正如我评论的那样：

第一个问题已解决：position:relative; 将元素置于最前面。z-index 如果另一个定位元素使用它且值高于 1

z-index

剩下的

使用重要的填充来覆盖您的主要 CSS 规则，同时重置一些显示和垂直对齐到中间。
round 可以固定为 height 和 width + text-align 和 line-height（使用 em 值来匹配你的 font-size）

片段：

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

header[role='banner'] {
  height: 100px;
  background-color: yellow;
  top: 0px;
  width: 100%;
  z-index: 10000;
  border-bottom: 1px solid #ccc !important;
}


/* SOME THING HER CAUSES THE CART TO BECOME UNCLICKABLE*/

header[role='banner']:before {
  display: block;
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.02);
  z-index: 0;
}

#main-nav-wrapper {
  display: block !important;
  margin-top: 10px;
}

.nav {
  float: left;
  clear: none;
  border: 0;
  margin: 0px;
  z-index: 100;
  display: block;
  list-style: none;
  margin-top: 30px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.nav li {
  float: left;
  position: relative;
}

.nav li a {
  padding: 0px 20px !important;
  display: block;
  text-decoration: none;
}

.nav li a:after {
  content: '';
  width: 1px;
  height: 15px;
  background-color: #e8e8e8;
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
}


/* CART */

.cart-contents:before {
  font-family: 'FontAwesome';
  font-size: 28px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  padding-right: 5px;
  vertical-align: middle;
  display: inline-block;
}

.cart-contents:hover {
  text-decoration: none;
}

.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

.cart-placement {
  float: right;
  padding: 15px!important;
  /* overwrite any reset elsewhere*/
  line-height: 50px;
  padding: 0;
}

a.cart-contents {
  color: #ff7454 !important;
}

a.cart-contents {
  position: relative;
}

.cart-contents-count,
.fa {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<header class="header" role="banner">
  <nav role="navigation">

    <div class="cart-placement">

      <a class="cart-contents" href="http://www.bbc.uk.co" title="add to cart"><i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
                      <div class="cart-contents-count">1</div>
                  </a>
    </div>
    <div id="main-nav-wrapper">
      <ul class="nav main-nav clearfix">
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Home</a></li>
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">About</a></li>
        <li id="menu-item-1262" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page"><a data-slide="konserter" class="menu-item scroll-link menu-item-type-post_type scroll-link menu-item-object-page" href="http://www.bbc.uk.co/">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

link 中的 div 应该是内联标记，例如 span .

购物车图标无法点击

Shopping cart icon unclickable

css

wordpress

nav

woocommerce