html - CSS:让我的侧边栏不在我的其他内容之上

Question

我目前正在努力使我的边栏(如图所示)不会显示在 map 的顶部。我希望它们是并排的，但不太确定如何使用 css 来实现。 这就是检查员内部的样子

如有任何帮助，我将不胜感激!我已经坚持了一段时间了:-(

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

编辑:我如何调用这些组件(均来自库)

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

EDIT2:这是 map 的样式。添加 margin-left: 64px 解决了这个问题，但是还有另一种替代方法，我不必对 64px 进行硬编码吗？

Answer 1

这是因为您指定了 position:absolute，因此对象(您的 sidenav)将被放置到您指定的确切位置(top:0；left:0 等等)。删除 css position 属性并添加 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>