Question

所以我得到了一个position:relative的包装器。在此包装器上方有一个带position:fixed的徽标。那个标志就像包装纸的中途所覆盖。因为我使用了边距使包装器稍微下降，所以我无法点击徽标上的链接。

徽标的z-index低于包装上的z-index。这意味着就是这样。徽标不应位于包装材料的前面。

我可以以某种方式使徽标上的链接可以点击而不将其带到包装器前面吗？

下面有一点JS小提琴：）

.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的psition设置为top:0px。将margin-top:70px添加到.inner-container并设置删除.content的上边距

＆＃13;

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

＆＃13;

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

＆＃13;

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*/
}

由于z-index，链接无法点击

2 个答案: