100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html实现子元素相对于父元素定位

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

时间:2020-05-21 21:43:02

相关推荐

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

如下图所示,要实现在地图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>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。