做地图时会遇到浮在地图上的搜索框。如高德地图搜索框类似的效果。起初用fixed的定位,一直要动态控制其宽度,很麻烦。
偶然发现,当元素设置了定位方式,但不给top等定位值时,其会脱离文档流,但其位置不会发生改变,相对的元素也会是父元素。
.search{ position: absolute; width: 100%; z-index: 100; background:rgb(37,55,75); height: 40px; }
效果图:
做地图时会遇到浮在地图上的搜索框。如高德地图搜索框类似的效果。起初用fixed的定位,一直要动态控制其宽度,很麻烦。
偶然发现,当元素设置了定位方式,但不给top等定位值时,其会脱离文档流,但其位置不会发生改变,相对的元素也会是父元素。
.search{ position: absolute; width: 100%; z-index: 100; background:rgb(37,55,75); height: 40px; }
效果图: