浮动层设置的简单方法

分类: 文章 • 2023-11-12 09:03:34

做地图时会遇到浮在地图上的搜索框。如高德地图搜索框类似的效果。起初用fixed的定位，一直要动态控制其宽度，很麻烦。

偶然发现，当元素设置了定位方式，但不给top等定位值时，其会脱离文档流，但其位置不会发生改变，相对的元素也会是父元素。

.search{
  position: absolute;
  width: 100%;
  z-index: 100;
  background:rgb(37,55,75);
  height: 40px;
}

效果图：

浮动层设置的简单方法