欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

程序员文章站 2022-06-30 21:50:55
此场景适用于移动端百分比布局,背景全屏显示。 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: absolute会脱离normal float, 即该元素会直接以root标签(类似window但不 ......

此场景适用于移动端百分比布局,背景全屏显示。

在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut;

原因:

absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值.

而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出来的高度是依照父元素继承的.