您的位置 首页 css教程

css固定定位脱离文档流怎么解决?

在我们做WEB前端开发写CSS样式的时候,有时需要使用到固定定位fixed,使用固定定位的话有时会出现固定定位的层脱离了文档流的问题,原因是没有给父级层设置相应的高度造成的,下面本篇给大家介绍一下如何解决这个问题。

具体介绍

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

1.png

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

2.png

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

<style>	.parent{		padding: 50px;		background: #000;	}	.son{	       /*设置固定定位*/		position:fixed;		width: 200px;		height: 200px;		background: red;	}</style>

3.png

解决方案1:

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

.parent{	/*解决方法1:css强制设置父模块宽度高度*/	height: 200px;	padding: 50px;	background: #000;}.son{	/*设置固定定位*/	position:fixed;	width: 200px;	height: 200px;	background: red;}

4.png

解决方案2:

我们可以使用JS设置父级DIV的高度等于子DIV,代码及运行效果如图

5.png

6.png

注意事项

需要注意浏览器兼容性的问题

本文作为示例只是以简单的情况告诉大家解决问题的思路,具体项目中需要更具体的解决方案

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css固定定位脱离文档流怎么解决?的详细内容,更多请关注火云技术网其它相关文章!

文章来源:火云技术网

文章标题:css固定定位脱离文档流怎么解决?

文章地址:https://www.pyhw.net/4045_css%e5%9b%ba%e5%ae%9a%e5%ae%9a%e4%bd%8d%e8%84%b1%e7%a6%bb%e6%96%87%e6%a1%a3%e6%b5%81%e6%80%8e%e4%b9%88%e8%a7%a3%e5%86%b3%ef%bc%9f.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图