css - 无序列表CSS定位

Question

我的标记中有两个元素，一个映射和一个无序列表:

<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是链接，我想做的是切换它们之间的位置，我的意思是右边的 map 和左边的无序列表。无论我做什么， map 都会被打破。一些建议？

Answer 1

通过在列表中进行简单的绝对定位，您的定位问题很容易解决。只需使用:

.map-visible-list {
   bottom: 0;
   position: absolute;
   right: 0;
}

您可以将列表放在任何您想要的位置。 map 容器已经绝对定位，因此您可以将整个容器移动到任何需要移动 map 的位置，然后根据需要重新定位可见列表。请记住，您可以使用顶部、底部、右侧或左侧。此外，如果需要，您还可以在位置上设置负值以将列表移到 map 容器边界框之外。

这没什么特别的，但可预测、可靠、省时，而且有效!