css下拉框在上层显示

CSS下拉框在上层显示，是指在下拉框下方会出现遮盖层，使得下拉框成为浮动于上方的元素。这样做的优点是在页面中避免难看的交叉鼠标样式，美观度更好。这里提供一个简单的方法来实现CSS下拉框在上层显示。

.dropdown {
    position: relative; /* 设置相对位置 */
    display: inline-block; /* 设置为内联元素 */
}

.dropdown-select {
    height: 40px; /* 下拉框高度 */
    padding: 10px 20px; /* 下拉框内部边距 */
}

.dropdown-select:hover {
    cursor: pointer; /* 鼠标悬停样式 */
}

.dropdown-options {
    position: absolute; /* 设置绝对定位 */
    top: 50px; /* 下拉框选项距离父元素顶部的距离 */
    left: 0; /* 下拉框选项距离父元素左侧的距离 */
    z-index: 99; /* 设置层级 */
    width: 100%; /* 宽度为父元素的100% */
    max-height: 200px; /* 最大高度为200px */
    overflow-y: auto; /* 纵向滚动条 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #ccc; /* 边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
}

.dropdown-options:hover {
    cursor: pointer; /* 鼠标悬停样式 */
}

.dropdown-options li {
    padding: 10px 20px; /* 选项内部边距 */
    font-size: 14px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    list-style: none; /* 清楚列表样式 */
}

.dropdown-options li:hover {
    background-color: #f9f9f9; /* 鼠标悬停时的背景颜色 */
} 

代码中，可以看到我们设置了下拉框的相对位置和内联元素，下拉选项的绝对位置和层级，以及下拉选项的样式。可以根据需要适当修改。在HTML中，需要用到ul和li标签来设置下拉选项：

<div class="dropdown">
    <div class="dropdown-select">请选择</div>
    <ul class="dropdown-options">
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
</div> 

这段HTML代码中，我们使用了dropdown-select来显示下拉框的选项内容。当用户点击此处时，下拉选项将会展开，并遮盖住下面的内容，使其在浮动层上方显示。

通过上面的方法，我们可以很容易地实现CSS下拉框在上层显示，并充分利用CSS的优点提升UI的美观度。