如何使我的固定标头出现在身体前面？

时间：2019-02-24 05:28:20

标签： php html css css3

我设计了固定的标题和主框，但是问题是当我滚动页面时，框会越过标题，因为标题是固定的。为什么会这样呢？如何解决此position: fixed堆叠顺序问题？

enter image description here 

header{
background-color: black;   
width:100%;
height: 50px; 
position: fixed;
}

.mainbox{
width: 800px;
height: 100%;
background-color: white;  
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%; 
margin-left: -500px; 
}

3 个答案:

答案 0 :(得分：0)

您应该在标题中增加z-index属性

header {
  background-color: black;   
  width:100%;
  height: 50px; 
  position: fixed;
  z-index: 999;
}

z-index的用途是什么？

它指定元素的堆栈顺序。堆栈顺序较高的元素始终位于堆栈较低的元素之前。例如，如果标题有z-index: 10，而主机箱有z-index: 9，则标题将堆积在主机箱的前面。

答案 1 :(得分：0)

您应该在CSS中为标头添加z索引属性，即z-index：2

答案 2 :(得分：0)

z-index属性可以完成CSS所需的操作。 我刚刚评论了CSS的margin-left，以展示您的结果。您可以将其保留在代码中。

运行以下代码。我希望它能解决您的CSS问题。

header{
background-color: black;   
width:100%;
height: 50px; 
position: fixed;
z-index:20;
color: white;
}

.mainbox{
width: 800px;
height: 100%;
background-color: green;  
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%; 
/**margin-left: -500px;*/
z-index:5;
}
<html>
<header class="header">
  This header
</header>
<div class="mainbox">
  Here will be list of questions by php
</div>

</html>

相关问题
最新问题