Link 由于 z-index 而无法点击

Question

所以我得到了一个 position:relative 的包装器。在这个包装纸上方有一个带有 position:fixed 的徽标。该徽标就像被包装纸覆盖了一半。因为我用 margin 把 wrapper 拉低了一点，所以我不能点击 logo 上的 link。

徽标的 z-index 低于包装纸上的 z-index。这本来就是那样的。徽标不应位于包装纸的前面。

我能否以某种方式使徽标上的 link 无需将其置于包装纸前面即可点击？

一点点 JS-fiddle 下面 :)

.content {
 -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 background-color: #fff;
 width: calc(100% - 100px);
 margin: 70px auto 280px auto;
  height:1000px;
 position: relative;
 z-index: 10;
}

.inner-container {
 position: relative;
 width: 100%;
 display: table;
}

#logo{
  width:100px;
  height:100px;
  margin-left:calc(50% - 50px);
  position:fixed;
  border-radius:50%;
  background-color:black;
}

<a href="#">
  <div id="logo"></div>
</a>
<div class="inner-container">
  <div class="content">
  </div>
</div>

Answer 1

将#logo的位置设置为top:0px。将margin-top:70px添加到.inner-container并设置删除.content[=17=的上边距]

.content {
 -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
 background-color: #fff;
 width: calc(100% - 100px);
 margin: 0px auto 280px auto;
    height:1000px;
 position: relative;
 z-index: 10;
}

.inner-container {
 position: relative;
 width: 100%;
 display: table;
    margin-top:70px;
}

#logo{
  width:100px;
  height:100px;
  margin-left:calc(50% - 50px);
  position:fixed;
  border-radius:50%;
  background-color:black;
  top:0px;
}

<a href="#" onclick="alert('here')">
  <div id="logo"></div>
</a>
<div class="inner-container">
  <div class="content">
  </div>
</div>

Answer 2

替换下面的样式大小写。

body{
    margin-top: 70px; /* ADD THE MARGIN TOP IN THE BODY TAG */
    margin-botton: 280px; /* ADD THE MARGIN BOTTOM IN THE BODY TAG */
}
.content {
    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
    background-color: #fff;
    width: calc(100% - 100px);
    margin: 0 auto 0 auto;/* MAKE MARGIN TOP AND BOTTOM TO ZERO AND ADD THE MARGIN TOP AND BOTTOM IN THE BODY TAG */
  height:1000px;
    position: relative;
    z-index: 10;
}

.inner-container {
    position: relative;
    width: 100%;
    display: table;
}

#logo{
  width:100px;
  height:100px;
  margin-left:calc(50% - 50px);
  position:fixed;
  border-radius:50%;
  background-color:black;
  top:0; /* ADD TOP AS ZERO, TO POSITION THE LOG ELEMENT FROM TOP*/
}

Link 由于 z-index 而无法点击

Link not clickable due to z-index

html

css

z-index