刚刚在使用格式化宽高模拟了模态框的灰色背景时,进一步认识了格式化宽高的一些表现,所以在此记录。

记录对格式化宽高的进一步认识

以上是模拟模态框时的源码。

当使用格式化宽高覆盖一个半透明背景时,为.box设置position:absolute;发现其流动性只能适应浏览器最大视口,当为body设置大于视口的长度宽度时,半透明背景的流动性消失,表现如下:

记录对格式化宽高的进一步认识

但在为.box设置为position:fixed;时,不管将body设置为多大,半透明背景都可以保持其流动性。

探究原因,鉴于格式化宽高相对于最近具有定位特性的祖先元素计算,所以为body加上了relative定位,此时position:absolute在任何情况下都保持流动性。

相关文章:

  • 2021-10-28
  • 2022-03-09
  • 2021-07-08
  • 2022-12-23
  • 2022-12-23
  • 2021-08-24
  • 2021-07-04
  • 2021-08-18
猜你喜欢
  • 2022-01-13
  • 2021-08-21
  • 2022-12-31
  • 2022-12-23
  • 2021-12-26
  • 2022-12-23
相关资源
相似解决方案