Question

您是否有机会知道如何将侧栏切换到地图上？地图总是覆盖我的切换按钮。我正在使用bootstrap简单的侧边栏。非常感谢！！！ https://codepen.io/william251082/pen/rGNPqr

<body>

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">

        <ul class="sidebar-nav">          

     <p><h1>Locations</h1></p>
     <form>
     <input placeholder="Search..." type="search" data-bind="textInput: filter">
     </form>

    <ul data-bind="foreach: myLocations">
        <li data-bind="text: name, visible: visible, click: $root.listViewClick" ></li>
    </ul>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->  

    <div id="page-content-wrapper">

      <div class="container-fluid"> 

        <div id="map"></div>
      <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">&#9776;</a>
        </div>

    </div>

    <!-- /#page-content-wrapper -->

<!-- /#wrapper -->

   #map {
width: 100%;
margin-left:10%;
position: absolute;
height: 100%;

}
#menu-toggle {
        width: 50px;
    height: 40px;
    background-color: black;
    margin:10 10;
}

Answer 1

使位置相对并移动它。绝对位置使其脱离文档流程。这是导致重叠的原因。如果不需要重叠，请避免使用position: absolute

Answer 2

使用z-index怎么样？

#menu-toggle {
    width: 50px;
    height: 40px;
    background-color: black;
    margin:10 10;
    z-index: 10;
}

Answer 3

左边的填充是10px，但切换按钮是50px。尝试为地图设置50px的边距，并将宽度降低到90％。

  ` #map {
       width: 90%;
       position: absolute;
       height: 100%;
     } 
    #menu-toggle {
       width: 50px;
       height: 40px;
       background-color: black;
      }`

还删除了一些边距

地图覆盖了切换按钮

3 个答案: