Как сделать, чтобы мой фиксированный заголовок отображался перед телом?
Я разрабатываю фиксированный заголовок и основное поле, но проблема в том, что когда я прокручиваю страницу, поле появляется над заголовком, поскольку заголовок фиксирован. почему так идет? Как решить эту проблему порядка укладки position: fixed?
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
Вы должны увеличить свойство z-index в своем заголовке.
header {
background-color: black;
width:100%;
height: 50px;
position: fixed;
z-index: 999;
}
Какая польза от z-index?
Он определяет порядок элемента в стеке. Элемент с более высоким порядком стека всегда находится перед элементом с более низким стеком. Например, если ваш заголовок имеет z-index: 10, а ваш основной ящик имеет z-index: 9, то ваш заголовок размещается перед вашим основным ящиком.
Вы должны добавить свойство z index для заголовка в css, т.е. z-index:2
z-index свойство может делать то, что вы хотите от css.
Я только что прокомментировал margin-left из css, чтобы продемонстрировать вам результат. Вы можете оставить его таким, какой он есть в вашем коде.
Запустите код ниже. Я надеюсь, что это решит вашу проблему с 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>