时间戳

首页 > 解决方案 > CSS：让我的侧边栏不在我的其他内容之上

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

问题描述

我目前正在尝试使我的侧边栏（如图所示）不会显示在我的地图顶部。我希望他们并排，但不太确定如何使用 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？ 在此处输入图像描述

标签： htmlcssreactjs

解决方案

这是因为您指定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>

推荐阅读