私は私のマークアップでは二つの要素、マップや番号なしリスト持ってポジショニング

Question

順不同リストのCSS：私は何をしたいか

<div id="map-se"> 

<ul class="sverige"> 
<li class="se1"><a href="#blekinge">Blekinge län</a></li> 
<li class="se2"><a href="#dalarnas">Dalarnas län</a></li> 
<li class="se3"><a href="#gavleborgs">Gävleborgs län</a></li> 


</ul> 
</div> 

HEREがリンクであるが、それらの間の位置を切り替えることで、私が意味します右のマップ​​と左の順序付けられていないリスト。 私が行っていることは、地図が壊れてしまうことです。 いくつかの提案？

Answer 1

このサイトのカップルを変更すると、これはあなたが探しているもののようです。要素がリストされる順序を変更します。だから、リストは、第1、第2、次にマップを来る：

<ul class="map-visible-list"></ul> 
    <ul class="sverige css-map"></ul> 
    <span class="cities sverige-cities"></span> 

そして、あなたのCSSに：

.cities.sverige-cities { 
     margin-left: 180px; 
    } 

Answer 2

私はちょうどその親の前にマップ可視を移動し、CSS-マップへのmargin-leftを追加しましたコンテナ

<div id="main" role="main"> 
    <ul class="map-visible-list">...Your Stuff..</ul> 
     <div id="map-se" class="css-map-container m430"> 
      <ul class="sverige css-map">....Your stuff...</ul> 
      <span class="map-loader" style="left: 50%; margin-left: -49.5px; margin-top: -16px; top: 472.5px; display: none; ">Loading ...</span><span class="cities sverige-cities"></span> 
     </div> 
</div> 

Answer 3

あなたのポジショニングの問題は、単純な絶対配置で簡単に解決できます。ちょうど使用してください：

そして、あなたはどこにでもリストを配置することができます。マップコンテナは既に完全に配置されているため、マップを移動する必要がある場合はいつでもコンテナ全体を移動し、必要に応じて表示リストの位置を変更できます。上、下、右、または左を使用できることを忘れないでください。また、必要に応じて、マップコンテナバウンディングボックスの外にリストを移動するためにポジションに負の値を設定することもできます。

それは何も想像もできませんが、予測可能で、信頼性が高く、時間を節約し、機能します！