css position absolute脱离了文档流解决方法

 时间:2024-10-12 07:09:47

1、我们需要创建一个简单的示例demo.html文件,然后里面放上两个DIV并设置背景色,给子DIV设置高度,代码如图

css position absolute脱离了文档流解决方法

2、接下来,我们运行看看,可以看到,当前的情况下,父DIV会因为子DIV的高度而被撑起来,如图所示

css position absolute脱离了文档流解决方法

3、然后我们给子DIV设置绝对定位position:absolute,然后浏览器运行查看就会发现,父DIV不会再根据子DIV的高度撑起来,也就是我们常说的脱离文档流了。

css position absolute脱离了文档流解决方法
css position absolute脱离了文档流解决方法

4、解决方案1.我们可以强行给父级DIV设置相应的高度,代码及运行效果如图,这个方案的缺点是不够灵活,需要自己计算要设置的高度。

css position absolute脱离了文档流解决方法
css position absolute脱离了文档流解决方法

5、解决方案2.我们可以使用JS设置父级DIV的高度等于子DIV,代码及运行效果如图

css position absolute脱离了文档流解决方法
css position absolute脱离了文档流解决方法
  • CSS实现圆角描边
  • 完美钢琴手机版如何更换皮肤
  • HTML教程 table标签的常用属性
  • 框架里面定义td或th标签的宽度无效怎么办
  • 将常用软件写入内存盘,享受飞一般启动速度!
  • 热门搜索
    五水共治手抄报图画 关于迎新年的手抄报 最美少年手抄报 手抄报古诗 中秋节手抄报资料 简单的手抄报 安全用电手抄报 我的梦中国梦手抄报内容 安全出行我做主手抄报 诚实守信手抄报图片