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

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

具体介绍

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

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

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

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

解决方案1：

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

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