css下拉菜单被挡住

最近我在写网页时遇到了一个问题：我的CSS下拉菜单被挡住了。下面是我的代码：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style> 

这是一个很基本的下拉菜单，按钮是一个带有“Dropdown”文本的按钮，点击后会显示菜单项。但是当我把按钮放在网页底部时，下拉菜单会被下方内容遮挡，无法正常显示。

这个问题的原因是z-index属性没有被正确设置。z-index是用来控制元素在z轴上的层叠关系的属性，数值越大，元素就越靠近用户，越可能被看到。

所以，我们需要设置一个足够大的z-index值来确保下拉菜单在其他内容之上。修改CSS代码如下：

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 100;
} 

这样一来，下拉菜单就可以正确显示了。

在实际开发中，当下拉菜单被遮挡时，我们还可以使用其他的解决方案来解决这个问题，例如使用 JavaScript 代码控制下拉菜单的位置、使用CSS实现fixed定位等等。