小div悬浮在大div右下角

最新推荐文章于 2024-03-01 20:12:09 发布

原创最新推荐文章于 2024-03-01 20:12:09 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #div #右下角 #absolute #relative

本文介绍了一个结合地图和热度排名的网页布局实现，使用HTML和CSS进行页面构建，展示了如何通过代码创建一个相对定位的地图区域，并在右侧固定显示热度排行榜。

部署运行你感兴趣的模型镜像

话不多说，直接上代码；

html:

<div id="map_hot_rank">
    <div id="ch_map"></div>
    <div id="hot_rank">
        <div class="hot_rank_title">
            <span>热度TOP排行榜</span>
        </div>
        <ul id="J_List">
        </ul>
    </div>
</div>

css:

#ch_map {
    height: 68.4vh;
    width: 100%;
    background-color: #0e1431 !important;
    border: 1px solid rgba(0, 252, 255, 0.7);
    position: relative;
}

#hot_rank {
    width: 18%;
    background: rgb(6, 8, 12);
    color: #ffffff;
    border: 1px rgba(0, 252, 255, 0.7) solid;
    bottom: 0;
    right: 0;
    position: absolute;
}

效果展示：