防止div被推到左边

我有两个div，一个用作面板，第二个是mapview（openlayers）面板在开始时隐藏，只在点击时显示。然而，当面板出现时，mapdiv被推到右边并与另一个div重叠。我怎样才能防止呢？防止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; 
}

来源

2012-11-07 MJB

绝对定位的一个或两个的这些都会definetly解决这个

<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放置在相对位置时，其周围没有任何东西。它与HTML中实际上没有它相同，然后当它变为可见时，相对定位的所有东西都必须调整，绝对定位将修复此问题。另一件事：您的标题是“Parent Div“ - 这不是在转移的div的父div中，它实际上是相邻的。如果它真的是父母，你就不会有这个问题。但是，父母又开始隐藏起来，所以其中的所有内容都将隐藏起来

来源

2012-11-07 21:21:40

当我在地图设置为绝对的，面板不显示 – MJB

@MJB - 如果你是我复制的方式有一个错字，现在试试 –

我没有复制它..事情是我不想要的位置硬编码，因为我需要改变一些动态填充。 – MJB

您可以将地图和面板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或块，现在看到地图div这取决于你的页面的其余部分已不置换结果

来源

2012-11-07 21:22:02 Pankrates

为什么它应该是min？如果有的话，不应该包装是最大宽度，因为否则它会被推到屏幕边缘 – MJB

我会看看它，谢谢 – MJB

一些可能的解决方案： position:absolute z-index

来源

2012-11-07 21:22:32

也尝试过，似乎没有工作 – MJB

也许你需要申请一个z-索引一个不同的值（比1）waveCreatorPanel？或者从geosurfmap中删除填充（或仅更改为顶部和底部填充或任何您需要的填充） –

防止div被推到左边

回答

相关问题