Question

我试图创建一个＆＃34;窗口＆＃34;到下面包含链接的固定div。

现在我有两个相对位置的div。顶部div（红色）表示空白＆＃34;窗口＆＃34;到下面的固定内容，第二个（蓝色）将包含更多的页面内容。

我已经寻找了一些答案并遇到了指针事件：无;如果顶部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

以下是您的问题的解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

点击相对位置{div}的div

1 个答案: