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

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>