Html 防止div被推到左侧

我有两个div，一个用作面板，第二个是mapview（openlayers） 面板在开始时隐藏，仅在单击时显示。但是，当面板出现时，mapdiv被推到右侧并与另一个div重叠。我如何防止这种情况

我基本上想要的是面板出现在地图的顶部

这是我的代码：

<!-- TOOLBAR/PANEL -->
    <div class="waveCreatorPanel" style="visibility:hidden; display:none;">
        <ul>
            <li><a id="createWave_addStation"data-role="button">Station hinzuf&uuml;gen</a></li>
            <li><a id="createWave_addItem" data-role="button" disabled="disabled">Item hinzuf&uuml;gen</a></li>
            <li><a id="createWave_saveWave"data-role="button">Wave speichern</a></li>
        </ul>
    </div><!-- /footer -->

    <!-- MAP -->
    <div class="geosurfmap" id="map" data-role="content" style="z-index:1"></div>

---

其中一个或两个的绝对定位将彻底解决这一问题

 <div class="panel" style="visibility:hidden; display:none; position:absolute; left:0px; top:0px;">
        <ul>
           //stuff here
        </ul>
    </div>

    <!-- MAP -->
    <div class="map" id="map" data-role="content" style="position:absolute; left:100px; top:100px;"></div>

//这里的东西

样式可以应用于css样式表附加或内联-因为你已经在你的div中有了一个样式属性，我刚刚添加了一个如何设置绝对的示例-将左和上调整到你真正想要的位置

当您最初拥有

可见性时：隐藏；显示：无将另一个div保留为相对位置，周围没有任何内容。这与实际上在HTML中根本没有它是一样的，然后当它变为可见时，必须调整相对定位的所有内容，绝对定位将解决这一问题

另一件事：你们的标题上写着“父Div”-这不是一个正在移动的Div的父Div，它实际上是相邻的。如果它真的是父母，你就不会有这个问题。但是，同样，父级开始为隐藏，因此其中的所有内容都将隐藏
您可以将贴图和面板div包装到另一个div中，并给出所需的最小宽度（如果面板div可见）。第二，你要把地图向右浮动

<div id="wrapper">
    <div class="panel"></div>
    <div class="map"</div>
</div>

<style>

#wrapper {
  min-width: 500px;
}

#wrapper .panel {
  position:relative;
  float: left
}

#wrapper .map {
  position: relative;
  float:right;
}
</style>


一些可能的解决方案取决于页面的其余部分：
位置：绝对位置
z-index
@MJB-如果你是按照我的方式复制的，那就是打字错误，现在就试试吧，我没有复制。。问题是我不希望位置被硬编码，因为我需要动态更改一些内容。@MJB-如果你将地图设置为绝对，你必须相应地调整左上方，它可能正好位于另一个元素的正后方，因为它是绝对的为什么它应该是最小的？如果有，包装不应该是最大宽度，因为否则它会被推到屏幕边缘。你可能需要对waveCreatorPanel应用不同值（而不是1）的z索引？或从geosurfmap中删除填充（或仅更改为顶部和底部填充或任何您需要的内容）
<div id="wrapper">
    <div class="panel"></div>
    <div class="map"</div>
</div>

<style>

#wrapper {
  min-width: 500px;
}

#wrapper .panel {
  position:relative;
  float: left
}

#wrapper .map {
  position: relative;
  float:right;
}
</style>