如何在侧边栏中设置按钮并使用位置显示侧边栏外部时管理按钮和模态弹出窗口？

Question

我在侧边栏中设置了按钮并使用z-index显示了一半外侧边栏并设置了z-index：0右侧面板以查看两个div的按钮覆盖，现在当我打开模态弹出窗口然后发出z-index即将来临和模态弹出显示内部覆盖，我无法改变html侧边栏的结构。

如何只显示css的更改，才能正确显示模态弹出窗口和侧边栏切换？

问题

我想要的是？

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  -moz--webkit-transition: all .5s;
  -ms--webkit-transition: all .5s;
  transition: all .5s;
  z-index: 1;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    z-index: 0;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">
                <button class="btn btn-round">B</button>
                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">
                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>                 
                <div class="clearfix"></div>
            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                      <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>

如果我删除主面板的z-index，那么一切正常但侧边栏切换不显示。

Answer 1

删除.main-panel上的z-index也改变.sidebar z-index:3

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    /*z-index:0*/
}

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index: 3;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">

                <button class="btn btn-round">
                 B
                </button>

                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>



                <div class="clearfix"></div>

            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">


                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
             
                <div class="clearfix"></div>

            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->
              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                      <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
        </div>
    </div>

Answer 2

结构上有一些变化有助于解决它。

.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  bottom: 0;
  width: 220px;
  left: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  z-index: 1;
}

.sidebar::after {
  display: block;
  content: "";
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #2f323a;
}

.sidebar .sidebar-wrapper {
  position: relative;
  height: calc(100vh - 75px); // overflow-x: hidden;
  width: 220px;
  z-index: 4;
}

.main-panel {
    position: relative;
    margin-left: 220px;
    background-color: #edeff5;
    transition: all .5s;
    z-index: 0;
}

.navbar-wrapper {
  position: absolute;
  right: -15px;
  z-index: 99999;
  top: 15px;
}

.sidebar .btn-round {
    float: left;
    height: 35px;
    width: 35px;
    padding: 0;
    font-size: 16px;
    position: relative;
    line-height: 35px;
    border-radius: 30px;
    outline: 0 !important;
    background-color: #2f323a;
    color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
        <div class="sidebar">

            <div class="navbar-wrapper">

                <button class="btn btn-round">
                 B
                </button>

                <div class="navbar-toggle">
                    <button class="navbar-toggler" type="button">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>



                <div class="clearfix"></div>

            </div>
            <div class="sidebar-wrapper">
            </div>
        </div>
        <div class="main-panel">
            <nav class="navbar">


                <div class="navbar-right-wrapper">
                    <div class="input-group no-border">
                        <input class="form-control" placeholder="Search..." type="text" value="">
                        <div class="input-group-text">
                            <i class="nc-icon nc-zoom-split"></i>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
             
                <div class="clearfix"></div>

            </nav>
            <div class="main-content">
              <!-- Trigger the modal with a button -->
              <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

              <!-- Modal -->

            </div>
        </div>
    </div>
	              <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                      <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>