单击具有相对位置的 div答案

【问题标题】：Click through div with relative position单击具有相对位置的 div
【发布时间】：2016-02-11 13:03:59
【问题描述】：

我正在尝试为下面的固定 div 创建一个“窗口”，其中包含一个链接。

现在我有两个具有相对位置的 div。顶部 div（红色）对下面的固定内容充当空“窗口”，第二个（蓝色）将容纳更多页面内容。

我已经寻找了一些答案并遇到了指针事件：无；如果顶部 div 是固定的，则该方法有效，但当它们更改为相对时会失败。

这是链接上方 div 的代码：

#spacer-block{
  position:relative;
  width: 100%;
  height: 300px;
  display:block;
  left:0;
  top:0;
  opacity:.4;
  background-color: red;
  pointer-events: none;
 }

这是一个 JSFiddle 显示问题

寻找任何建议。也许我的做法是错误的。

感谢您的帮助！

【问题讨论】：

所以您只希望链接可点击？如果是这样，为什么要将z-index: -1; 添加到#window-space div？抱歉，如果我没有正确理解问题。
可能是stackoverflow.com/questions/13798446/…的副本
我很难弄清楚你实际上想用 Jquery 完成什么。当事件发生时，您是否尝试在另一个“可点击”后面设置一个 div？
@GustavoHoirisch 谢谢那个链接！没有完全按照我的意愿做，但做了一些调整。

标签： jquery html css

【解决方案1】：

这里有一个解决您问题的方法。

#top-content{
  position:reletive;
  display:block;
  width:100%;
  height:300px;
  text-align:center;
  background-color:blue;
}
#window-space{
 position:fixed;
 top:60px;
 width: 100%;
 height: 100px;
 text-align: center;
 vertical-align: middle;
}

#spacer-block{
  width: 100%;
  height: 300px;
  display:block;
  left:0;
  top:0;
  opacity:.4;
  background-color: red;
  pointer-events: none;
 }
 
 #window-space h2{
	display: table-cell;
	vertical-align: middle;
  	padding-top: 15%;
}
 
#window-inner{
	display: table;
	width: 56%;
	height: 100%;
	margin: auto;	
}

<div id="window-space"><div id="window-inner"><h2><a href="#">This is where I want to click</a></h2></div></div>
<div id="spacer-block"></div>
<div id="top-content">

</div>

【讨论】：