CSS：让我的侧边栏不位于其他内容之上

Question

我目前正在尝试使我的侧边栏（如图所示）不会显示在地图的顶部。我希望它们并排，但不太确定如何使用 css 来做到这一点。 这就是检查器内部的样子

我将不胜感激任何帮助！我已经被这个问题困扰了一段时间了:-(

我尝试删除 z-index 但这只是隐藏了侧边栏

编辑：我如何调用这些组件（两者都来自库）

class DashboardView extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>
        <div>
          <Sidebar />
        </div>
        <div>
          <Map />
        </div>
    </div>;
  }
}

EDIT2：这是地图的样式。添加

margin-left: 64px

可以解决问题，但是是否有另一种选择，我不必硬编码

64px

？

Answer 1

这是因为您指定了

position:absolute

，因此对象（您的侧导航）将被放置到您指定的确切位置（顶部：0；左侧：0 等）。删除 css 位置属性并添加 float:left 可能会解决您的问题。我无法给你确切的解决方案，因为你没有分享你的 HTML 代码。请参阅以下示例并尝试将

position : absolute

添加到第一个

div

标签：

<div style="float:left;top:0; width: 100px;height: 100px; background-color: yellow">float left</div>
<div style="float:left; width: 100px;height: 100px; background-color: green">float left</div>

            

Answer 2

如果没有看到包装 HTML，这只是一个猜测......

HTML 需要一个包装器（可以是正文）

<div id="mapContainer">
   <div id="sidebar">Sidebar</div>
   <div id="map">Map</div>
</div>

CSS

#mapContainer {
   display:flex;
}
#sidebar {
   flex: 1;
}
#map {
   flex: 9;
}

还要从侧边栏导航中删除它们，因为它们会击败弹性盒

position: absolute;
top: 0;
left: 0;
bottom: 0;

Answer 3

您可以在侧边导航中使用左浮动

Answer 4

如果您使用引导程序，那么以下代码将会有所帮助：

 class DashboardView extends Component {
    constructor(props) {
        super(props);
      }
      render() {
        return <div className="row">
            <div className="col-md-3">
              <Sidebar />
            </div>
            <div className="col-md-9">
              <Map />
            </div>
        </div>;
      }
    }