对于我的联系页面,我创建了一个包含 li 内容的导航(例如,主页、关于我们、博客等),我有一个主 div '.contact_header',其中包含 '.contact_header_cover' 和 contact_nav_list
<div class='contact_header'>
<div class='contact_header_cover'></div>
<div class='contact_nav_list'>
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "About us", '#' %></li>
<li><%= link_to "Blog", '#' %></li>
</ul>
</div>
</div
我重叠了“.contact_header_cover”(浅绿色背景)和“.contact_nav_list”的 2 个 div,但在这样做时我无法点击 ul>>li 链接
对于类 '.contact_header' 我给了它一个 position:relative
对于类 '.contact_header_cover' 我给了它一个 position:absolute
对于类'。 contact_nav_list' 我给了它一个 position:absolute & z-index:1;
CSS 问题: 尝试重叠 div 我无法点击我的 li 链接(主页、关于、博客等)下面是我的 HTML 和 CSS 内容
CSS file
.static_background_img {
background: url("img-bkground-image-staticpg.png");
height: 100%;
padding: 0px;
}
.contact_header {
height: 100%;
padding: 0px;
position: relative;
}
.contact_header_cover {
height: 100%;
background-color: #3D8E58;
opacity: 0.2;
position: absolute;
left: 0;
right: 0;
}
.contact_nav_list {
padding: 35px;
z-index: 1;
}
.contact_nav_list ul {
margin-bottom: 0px;
}
.contact_nav_list ul li {
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 200;
color: #aaa3a4;
}
HTML file
<div class="medium-12 columns static_background_img">
<div class="home_line"></div>
<nav>
<div class="medium-12 columns contact_header">
<div class="contact_header_cover"></div>
<div class="contact_nav_list">
<ul class="inline-list left">
<li><%= link_to "logo", '#' %></li>
</ul>
<ul class="inline-list right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Blog", '#' %></li>
<li><%= link_to "Contact us", '#' %></li>
<li><%= link_to "Privacy", '#' %></li>
<li><%= link_to "Terms", '#' %></li>
</ul>
</div>
</div>
</nav>
<div class="medium-12 columns contact_content"> content info</div>
</div>
最佳答案
在 contact_header_cover
上尝试 pointer-events: none;
。这会将任何鼠标事件传递给底层元素,就好像它不存在一样。
关于HTML CSS Div 重叠绝对和相对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27672853/