jquery - 单击具有相对位置的 div

Question

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

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

我寻找了一些答案并遇到了 pointer-events:none;如果顶部 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显示问题

寻找任何建议。也许我的做法不对。

感谢您的帮助!

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