Link not clickable due to z-index

Question

So I got a wrapper with position:relative. Above this wrapper there is a logo with position:fixed. That logo is like halfway covered by the wrapper. Because I used margin to bring the wrapper a bit down, I can't click the link on the logo.

The z-index of the logo is lower than the one on the wrapper. This is meant to be like that. The logo shouldn't be in front of the wrapper.

Can I somehow make the link on the logo clickable without bringing it in front of the wrapper?

A little JS-fiddle below :)

.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

set the psition of #logo to top:0px.Add margin-top:70px to the .inner-container and set remove the top margin of .content

.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>