标签：3px solid 2C58A6 选中 5px div border 下拉框 left

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

 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;
}

标签：3px,solid,2C58A6,选中,5px,div,border,下拉框,left
来源： https://www.cnblogs.com/KeepThreeMunites/p/14107199.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。