css下拉框被挡

当我们在使用CSS编写下拉框时，有时会遇到下拉框被其他元素遮盖的问题。这种问题很常见，但解决方式也比较简单。

首先我们需要明确一个问题，那就是元素是一个自带下拉框的元素，而我们在CSS中编写的下拉框实际上是一个模拟的下拉框，也就是说模拟出来的下拉框不是元素本身带的下拉框。

那么为什么会出现下拉框被遮盖的问题呢？这是因为模拟出来的下拉框通过CSS样式加上了position属性，而position属性会影响元素的定位。

解决方式也很简单：给模拟的下拉框加上一个较大的z-index属性值即可。z-index属性值用于设定元素的堆叠顺序，数值越大越靠上。比如我们可以这样写：

.select{
  position:relative;
}

.select ul{
  position:absolute;
  top:100%;
  left:0;
  z-index:999;
} 

在上面的代码中，.select元素设置了position:relative以作为定位的基准，而下拉框部分的代码则使用了position:absolute来实现绝对定位。而我们加上的z-index:999的代码即是解决下拉框被遮盖的问题的关键所在。