div中下拉框无法点击展开跟选中

在做一个简单的前端页面时遇到了一个问题，点击下拉框，但是没有任何响应

 

 html里的div模块

        <div class="BoxWrap">
            <div class="horn">
                <!-- 四个div分别为四个角上的div -->
                <div class="lt"></div>
                <div class="rt"></div>
                <div class="rb"></div>
                <div class="lb"></div>
            </div>
            <div class="main_title">XXXX</div>

            <select name="status" id="tabs" class="selector">
                <!--<option>ALL</option>-->
                <option>X1</option>
                <option>X2</option>
                <option>X3</option>
            </select>

            <div id="content">
                <div id ="chanpin0" class="none active">
                    <div id ="main1" class="chart" ></div>
                </div>

                <div id ="chanpin1" class="none">
                　　<div id ="main2" class="chart" ></div>
                </div>

                <div id ="chanpin2" class="none">
                　　<div id ="main3" class="chart" ></div>
                </div>
            </div>
        </div>

 

关于下拉框的css

        .selector{
            margin: 1px 1px 0 0 ;
            position: absolute;
        }
        #content .active{
            display: block;
        }
        .chart{
            width: 400px;
            height: 300px;
        }
        .none {
            display: none;
        }
        .BoxWrap{
          top: 200px;
          left: 1450px;
          width: 400px;
          height: 300px;
          position: absolute;
        }

 

div边框效果的css

.main_title {
    width: 150px;
    height: 35px;
    line-height: 33px;
    background-color: #2C58A6;
    border-radius: 18px;
    position: absolute;
    top: -17px;
    left: 50%;
    margin-left: -70px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 28px;
    z-index: 1000;
}

.horn{
  position: absolute;
  width: 100%;
  height: 100%;
  border:2px solid #2C58A6;
  margin: 0 auto;
}
.horn>div{
    width: 10px;
    height: 10px;
    position:absolute;
}
.horn .lt{
    border-top: 5px solid #2C58A6;
    border-left: 5px solid #2C58A6;
    left: -3px;
    top: -3px;
}
.horn .rt{
    border-top: 5px solid #2C58A6;
    border-right: 5px solid #2C58A6;
    right: -3px;
    top: -3px;
}
.horn .rb{
    border-bottom:5px solid #2C58A6;
    border-right: 5px solid #2C58A6;
    right: -3px;
    bottom: -3px;
}
.horn .lb{
    border-bottom:5px solid #2C58A6;
    border-left: 5px solid #2C58A6;
    left: -3px;
    bottom: -3px;
}

 

解决办法，给边框的css以及下拉框的css分别设置显示层级，通过使用z-index

下拉框

        .selector{
            margin: 1px 1px 0 0 ;
            position: absolute;
            z-index: 2;
        }

边框

.horn{
  position: absolute;
  width: 100%;
  height: 100%;
  border:2px solid #2C58A6;
  margin: 0 auto;
  z-index: 1;
}

注意：在使用z-index参数时，要先设定position参数。