Question

我有两个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>

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中有了一个样式属性我刚刚添加了一个如何设置绝对的示例 - 将left和top调整到你真正想要它们的位置

当你最初让visibility:hidden; display:none;离开另一个div时，它将被置于相对位置，而周围没有任何东西。它实际上与HTML中没有相同，然后当它变为可见时，所有相对定位的东西都必须调整，绝对定位将解决这个问题

另一件事：你的标题是“父母分区” - 这不是div的父div，它实际上是相邻的。如果它实际上是父母，你就不会遇到这个问题。但是，父母再次开始隐藏，所以其中的所有内容都将被隐藏

Answer 2

您可以将地图和面板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>

修改为了澄清我的观点，我为你做了fiddle 您可以将面板类设置为display：none或block，以查看map div现在不再替换

Answer 3

根据页面的其他部分，一些可能的解决方案： position:absolute z-index

防止div被推到左边

3 个答案: