Как заставить мой фиксированный заголовок появляться перед телом? - PullRequest
Новая
       1

Как заставить мой фиксированный заголовок появляться перед телом?

0 голосов
/ 24 февраля 2019

Я проектирую фиксированный заголовок и главное окно, но проблема в том, что когда я прокручиваю страницу, окно появляется поверх заголовка, так как заголовок фиксирован.почему так происходит?Как решить эту проблему 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 голосов
/ 24 февраля 2019

Вы должны добавить свойство z ​​index для заголовка в css, т.е. z-index: 2

0 голосов
/ 24 февраля 2019

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>
0 голосов
/ 24 февраля 2019

Вы должны увеличить z-index свойство в своем заголовке 

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

Для чего используется z-index?

Это определяет порядок стеков:элемент.Элемент с более высоким порядком стека всегда находится перед элементом с более низким стэком.Например, если ваш заголовок имеет z-index: 10, а ваш основной ящик имеет z-index: 9, тогда ваш заголовок укладывается перед вашим главным ящиком.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...