导航栏下拉菜单被内容遮挡，如何使其显示在主内容上方？

你的下拉菜单被main内容遮挡的核心原因是**堆叠层级（z-index）**问题：默认情况下，页面后续元素的堆叠优先级更高，导致absolute定位的下拉菜单被下方内容覆盖。只需两步即可解决：

解决方案步骤 #

• 给下拉菜单的父容器.mymenu设置足够高的z-index，确保它的堆叠层级高于main区域内容
• 给下拉菜单.times添加背景样式，提升菜单可读性（可选但推荐）

修改后的关键CSS代码 #

.mymenu {
  position:relative;
  display:inline-block;
  z-index: 999; /* 新增：提升父容器堆叠层级 */
}
.times {
  display:none;
  position:absolute;
  width:auto;
  background: #fff; /* 新增：添加白色背景 */
  padding: 8px 0; /* 新增：优化内边距 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 新增：添加阴影增强视觉层次 */
}
.times a {
  display: block; /* 新增：让菜单项垂直排列 */
  padding: 6px 12px; /* 新增：优化点击区域 */
}

完整修改后的代码 #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>news</title>

<style>
super-newspaper {
display:grid;
grid-template-areas: 
'navi'
'main';
}
nav {
grid-area:navi;
text-align:center;
padding-bottom:30px
}
main {
grid-area:main;
}


.mymenu {
position:relative;
display:inline-block;
z-index: 999; /* 新增 */
}
.mymenu a {
position:relative;
display:inline-block;
}   
.times {
display:none;
position:absolute;
width:auto;
background: #fff; /* 新增 */
padding: 8px 0; /* 新增 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 新增 */
}
.times a {
display: block; /* 新增 */
padding: 6px 12px; /* 新增 */
}
.mymenu:hover .times 
{display:block}


super-recent-news {
display:grid;
grid-template-areas:
'first second'
'third fourth';}

article {
display:block;
width:90%
}
article figure {
position:relative;
margin:0;width:100%;
background-color:#000;
height:50px;
}
article figcaption {
position:absolute;
top:8px;
right:8px;
background-color:#121212;
color:#FFFFFF;
border-radius:3px;
padding:3px 6px 3px 6px
}
article img {
width:100%;background-color:#000;height:50px;
}


super-recent-news article:nth-child(1) {grid-area:first;}
super-recent-news article:nth-child(2) {grid-area:second;}
super-recent-news article:nth-child(3) {grid-area:third;}
super-recent-news article:nth-child(4) {grid-area:fourth;}


</style>
</head>

<body>
<super-newspaper>

<nav class="menu"> 
<div class="mymenu"><a href="#">News</a>
<div class="times">
<a href="#">World</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</div></div>
</nav>




<main>
<super-recent-news>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>

<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>

<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>

<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>


</super-recent-news>
</main>


</super-newspaper>

</body>
</html>

原理说明 #

当元素使用position: relative/absolute/fixed时，浏览器会创建堆叠上下文，z-index值越高的元素显示层级越靠前。给.mymenu设置z-index:999后，其所有子元素（包括下拉菜单.times）会继承该堆叠层级，从而显示在main区域内容上方。添加背景和阴影是为了让下拉菜单与下方内容区分开，提升用户体验。

内容的提问来源于stack exchange，提问作者user20304954