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，因此对象（您的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>

Answer 2

如果您正在使用引导程序，则以下代码将有所帮助：

 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>;
      }
    }

Answer 3

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

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

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

CSS

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

也请从侧边栏导航中删除这些内容，因为它们将击败flexbox

MVC application

CSS：使侧边栏不位于其他内容之上

3 个答案: