0

我有两个 div，一个充当面板，第二个是地图视图（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;
}
4

3 回答 3

2

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

 <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，它实际上是相邻的。如果它实际上是父母，你就不会遇到这个问题。但是又一次，父级以隐藏的方式开始，因此其中的所有内容都将被隐藏

于 2012-11-07T21:21:40.897 回答
0

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

编辑 为了澄清我的观点，我为您做了一个小提琴您可以将面板类设置为 display:none 或 block 以查看地图 div 现在不再因此而移位

于 2012-11-07T21:22:02.117 回答
0

一些可能的解决方案取决于您页面的其余部分： position:absolute z-index

于 2012-11-07T21:22:32.397 回答