zoukankan      html  css  js  c++  java
  • 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{
                 400px;
                height: 300px;
            }
            .none {
                display: none;
            }
            .BoxWrap{
              top: 200px;
              left: 1450px;
               400px;
              height: 300px;
              position: absolute;
            }
    

    div边框效果的css

    .main_title {
         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;
       100%;
      height: 100%;
      border:2px solid #2C58A6;
      margin: 0 auto;
    }
    .horn>div{
         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参数。

  • 相关阅读:
    linux下samba服务器的搭建(案列模拟)
    linux下nfs服务器的搭建
    linux 下 php+gd2+freetype+jpeg+png+zlib编译安装
    linux下xcache的安装
    wget如何设置代理
    实验记录:vsftp整合mysql-pam管理虚拟账号
    tr命令 实例
    sed学习笔记
    Byte、KB、MB、GB、TB、PB转换
    对lombbok @slf4j 进行测试用例
  • 原文地址:https://www.cnblogs.com/KeepThreeMunites/p/14107199.html
Copyright © 2011-2022 走看看