css下拉框显示顶层

CSS下拉框的显示层级问题一直是前端开发中常遇到的问题。如何让下拉框覆盖住其他元素，成为显示的顶层呢？下面介绍几种常见的解决方法。

.select {
  position: relative;
  z-index: 10;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
} 

上面的代码使用了CSS的z-index属性，它决定元素的层叠顺序，值越大的元素显示在值越小的元素之上。在这个例子中，下拉框的z-index设为20，比外面的选择框的z-index设为10高，所以下拉框会覆盖在外面的选择框上面。

.select {
  position: relative;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
}
.select:hover .dropdown {
  z-index: 20;
} 

这个代码使用了CSS的:hover伪类，表示当鼠标悬停在选择框上方时，下拉框的z-index被设为20，使下拉框覆盖在其他元素之上。这种方法可以在鼠标悬停时改变下拉框的显示层级，不需要在元素的CSS样式中指定z-index。

总之，无论是使用CSS的z-index属性还是:hover伪类，都可以让下拉框显示在顶层，提供更好的用户体验。