遮挡

Question

//登陆
用的mui框架，首页和登陆页面都出现了顶部导航<header class="mui-bar mui-bar-nav">遮挡<div class="mui-content">的问题，如下图所示

<div class="wrap">是320X440,header是320X40,感觉是正确的。

但是图二，在审查器查看<div class="wrap">的父级div——<div class="mui-content">发现布局跑到header下面，相比起<div class="wrap">上去了40px

在元素审查里面看到有个padding-top属性，不是很理解这个属性，但是我根据我自己设置的header的高度2rem重写了padding-top，如下。
.mui-bar-nav ~ .mui-content{

padding-top:2rem;

}

//首页
还有首页中也有相同的问题，不同的是，登陆界面仅仅是<div class="mui-content">跑上去了，但是主页的内容跑上去了，导致主体内容被header遮挡了40px(2rem)，而底部空了40px(2rem).高度原本计算的是：header-2rem,content-20rem(slider-8rem+功能模块-3*4rem),底部-2rem.


第一次用mui，对于布局这一块不是很懂，望指教，谢谢~

Answer 1

通过审查元素，可以清楚地看到。
.mui-bar，是fixed定位，会始终占用某块区域的高度。
.mui-content的padding-top是为了挤压容器的top区域，相当于给header部分让出了它所需要的高度。
这样结合使用，就content部分就不会被head部分遮挡了。