我试图将滑动地图嵌入到HTML页面中。现在，地图将漂浮在其他元素之上。我该怎么做才能使地图出现在其中一个容器中？
我尝试删除.map {position：absolute}行但是地图停止显示。我还试图确保HTML中链接的其他CSS文件不会覆盖地图的样式。
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
.map {
/*position: absolute;
top: 500px;
bottom: 0;*/
width: 80%;
}
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<body>
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
<h2 class="w3-wide">Guangzhou</h2>
<p class="w3-opacity"><i></i></p>
<hr>
<div id='slidemap-cont'>
<div id='before' class='map'></div>
<div id='after' class='map'></div>
</div>
</div>
<script>
mapboxgl.accessToken = 'MY_ACCESS_TOKEN';
var beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/estella213439/cju7drf1x1zr41flvd51t9adb',
center: [113.33833,23.08506],
zoom: 12
});
var afterMap = new mapboxgl.Map({
container: 'after',
style: 'mapbox://styles/estella213439/cju7af6q42ia21fqbv7ffas1g',
center: [113.33833,23.08506],
zoom: 12
});
var map = new mapboxgl.Compare(beforeMap, afterMap, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
</script>
</body>
如果你需要它们都是position: absolute;，那么你需要为你的第二个元素指定top与第一个元素的高度相同
.map {
position: absolute;
width: 80%;
height: 50%;
}
#before {
top: 0;
}
#after {
top: 50%; // Must match height of before element
padding-top:5px; //So you can see where one map stops and the other begins.
}
这是一个JSFiddle与您的示例来演示。