css固定顶部 且不遮挡下面元素显示

css固定顶部 且不遮挡下面元素显示

在css布局中 经常会遇到固定头部导航栏 或者内容块的需求
刚巧在做移动端的页面 遇到这样的需求 对头部进行固定
没想到下面的元素直接顶到了页面的开始 怎么解决呢 继续看 !

具体的解决办法

1.通过添加父元素实现不遮挡

html代码

<div class='head'>
	<div class ='fixed_head'></div>
</div>

css代码

.head {
	width: 100%;
	height: 200px;
}

.fixed_head {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: white;
}

这样给要设置fixed属性的div包裹一层 也就是他的父亲 , 记得 一定要给父元素设置高度占位

上图看效果