html - map 覆盖了切换按钮

标签 html css twitter-bootstrap

你有没有机会知道如何将侧边栏切换到 map 上? map 总是覆盖我的切换按钮。我正在使用 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;
}

最佳答案

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

关于html - map 覆盖了切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46262624/

相关文章:

javascript - 如何制作船舶动画

css - 垂直对齐 :after element

css - 我应该使用带有字体的 webpack 吗?

php - 表单提交到目录?可能的?

html - 为什么正确打印网页如此困难?

HTML 表格(宽度为 100%!)使用内联 block 时如何填充所有表格宽度

javascript - 如何显示过滤后的所有数据

javascript - jquery获取子元素的attr

css - 当用户缩放时变形的 div

css - 带背景/边框的响应式视频