css下拉菜单被图挡住

最近，在我的网页项目中，我遇到了一个令人头疼的问题——CSS下拉菜单被图像遮挡了。

nav {
  position: relative;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin: 0 10px;
  position: relative;
}

nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

nav ul li:hover > ul {
  display: block;
} 

以上代码是我使用的CSS样式。普通的下拉菜单，都是通过设置子菜单为绝对位置，再通过动态地修改display属性来实现的。但是，这个方法会导致下拉菜单被其他在同一层级的元素遮挡。

原因是我的下拉菜单是在导航栏的下方，而网页中的其他内容可能也会在导航栏下方，所以可能会把下拉菜单遮挡住。

解决这个问题的方法有很多，我使用的是将下拉菜单的父元素设为相对定位（position: relative），这样下拉菜单就会相对于父元素定位，而不是相对于整个页面定位。

nav ul li {
  position: relative;
} 

这是修改后的CSS代码。我将下拉菜单的每个选项的li都设置为相对定位，这样子菜单就不再相对于整个页面而是相对于选项定位了，这样就能顺利显示在导航栏下方了。

这个问题的解决方法和原因，其实也不只是在CSS下拉菜单中出现过，很多情况下，元素受到遮挡的原因都是因为它的定位方式错误。掌握好元素定位的用法，对于CSS的掌握来说，是至关重要的。