css下拉框不能选中

最近在写一个下拉框的时候，遇到了一些问题。由于我使用了CSS代码来设计下拉框的样式，但是在测试的时候发现，无论我怎么点击下拉框的选项，它都不能被选中。这让我十分困惑。

 .drop-down {
        position: relative;
        display: inline-block;
        margin: 0 5px;
    }
    
    .drop-down .selected {
        padding: 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .drop-down .options {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    
    .drop-down .options li {
        padding: 5px;
        cursor: pointer;
    }
    
    .drop-down .options li:hover {
        background-color: #ccc;
    }
    
    .drop-down .open .options {
        display: block;
    } 

经过一番研究，我发现问题出在CSS的position属性上。因为在我的代码中，我将下拉框的选项部分设置为了position: absolute;，导致其被隐蔽在了下面，无法被选中。

解决这个问题的方法很简单，只需要将position改为相对位置，就可以让选项正确显示，并可以被选中。

 .drop-down .options {
        position: relative;
        //其他属性保持不变
    } 

经过这样的修改，我成功解决了下拉框不能选中的问题。小伙伴们如果遇到相似的问题，不妨也来看看CSS的position属性是否有问题。