html - 防止div被推到左边

Question

我有两个 div，一个作为面板，第二个是 mapview (openlayers)该面板在开始时是隐藏的，只有在单击时才会显示。然而，当面板出现时，mapdiv 被推到右边并与另一个 div 重叠。我怎样才能防止这种情况发生？

我基本上想要的是面板出现在 map 的顶部。

这是我的代码:

<!-- 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>

CSS:

.waveCreatorPanel {
    float:left;
}
 .geosurfmap {
    padding:25px;
    margin:25px;
    width:80%;
    float:left;
}

Answer 1

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

 <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 中已经有一个样式属性，所以我刚刚添加了一个如何设置绝对值的示例 - 将左侧和顶部调整到您实际需要的位置

当你最初有 visibility:hidden; display:none; 那就是将另一个 div 放置在 relative 位置，周围没有任何东西。这与实际上根本没有在 HTML 中一样，然后当它变为可见时，必须调整所有相对定位的内容，绝对定位将解决此问题

另一件事:你的标题说“父 Div” - 这不是正在移动的 div 的父 div，它实际上是相邻的。如果它实际上是 parent ，您就不会遇到这个问题。但是又一次，父级开始时是隐藏的，因此其中的所有内容都将被隐藏