0

2 つの div があり、1 つはパネルとして機能し、2 つ目は 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;
}
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 にまったく含まれていないのと同じです。次に、相対的に配置されていたすべてを調整する必要があるように変更すると、絶対配置でこれが修正されます。

別のこと：あなたのタイトルは「Parent Div」と言っています-これは、シフトされているdivの親divではなく、実際には隣接しています。それが実際に親である場合、この問題は発生しません。しかし、再び親は hidden として開始されるため、その中のすべてが非表示になります

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

EDIT 私のポイントを明確にするために、私はあなたのためにフィドルを作成しましたパネルクラスをdisplay:noneまたはblockに設定して、結果としてマップdivがもう移動しないことを確認できます

于 2012-11-07T21:22:02.117 に答える
0

ページの残りの部分に応じて、考えられる解決策がいくつかあります。 position:absolute z-index

于 2012-11-07T21:22:32.397 に答える