html实现子元素相对于父元素定位

最新推荐文章于 2022-07-23 20:51:35 发布

置顶周达

最新推荐文章于 2022-07-23 20:51:35 发布

阅读量4.4k

点赞数 3

分类专栏： css 文章标签：子元素相对父元素定位 css html

本文链接：https://blog.csdn.net/gis_zhouda/article/details/100120331

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如下图所示，要实现在地图div中放置一个select下拉选择框，select要相对于地图的div的位置，显示在左上角。

html 如下：

.footer-select {
    POSITION: absolute;
    LEFT: 70px;
    TOP: 10px;
}

<div id="mapDiv" class="right-map" style="height:100%;width: 100%;float: left;">
     <div class="footer-select">
        <select class="footer_sel" id="selectmapDiv"> 
          <option></option>
        </select>
     </div>
</div>

仅仅这样设置select并没有相对于地图div的位置显示，而是位于地图div的父元素的左上角，left和top并不是相对于地图div计算的。地图div还要加上position:relative才可以。

.footer-select {
    POSITION: absolute;
    LEFT: 70px;
    TOP: 10px;
}

<div id="mapDiv" class="right-map" style="height:100%;width: 100%;float: left;position:relative">
     <div class="footer-select">
        <select class="footer_sel" id="selectmapDiv"> 
          <option></option>
        </select>
     </div>
</div>

实现这种效果肯定还有其他的方法，个人感觉这种方法比较简单。