css中position:fixed为啥下面还要设置一个div的height

最新推荐文章于 2022-07-26 10:47:05 发布

景小柚

最新推荐文章于 2022-07-26 10:47:05 发布

阅读量1.5k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/u011402106/article/details/107009319

版权

css中position:fixed会造成“高度塌陷”。
高度塌陷：
父元素包含子元素，子元素设置为浮动且父元素的height为auto或者不设置height,子元素就会脱离文档流，父元素高度塌陷为0。
解决方案：
一、margin-top
给父元素next同级的元素设置margin-top,设置的margin-top要>=position设置浮动元素的高度
二、新增<div style='height: Num px'></div>Num的数值也同样>=positon设置浮动元素的高度，在postion子元素的父元素同级添加新的div元素，并设置height。
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent-rz{
				position: fixed;
				top: 0;
				height: 0;
				background-color: #007AFF;
				font-size: 1.25rem;
				height: 2rem;
			}
			/* .parent-next{ 解决方法一
				margin-top: 2.5rem;
			} */
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="parent-rz">我是固定定位的</div>
		</div>
		<div style="height: 1.5rem;"></div><!--解决方式二-->
		<div class="parent-next">
			我是固定定位的下一个元素
		</div>
	</body>	
</html>

景小柚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中position:fixed为啥下面还要设置一个div的height

css中position:fixed会造成“高度塌陷”。高度塌陷：父元素包含子元素，子元素设置为浮动且父元素的height为auto或者不设置height,子元素就会脱离文档流，父元素高度塌陷为0。解决方案：一、margin-top给父元素next同级的元素设置margin-top,设置的margin-top要>=position设置浮动元素的高度二、新增<div style='height: Num px'></div>Num的数值也同样>=positon设
复制链接

扫一扫