Настройка фиксированного меню и содержимого страницы с помощью CSS
У меня есть строка меню, которая фиксируется, поэтому, когда пользователь прокручивает, она остается в верхней части страницы.
Однако мне нужен промежуток между меню и страницей (ниже он называется pageTest).
Я попытался изменить поле в .menu на
margin: 0 0 50px; 0;
Однако ничего не происходит? Мой рабочий пример
HTML
<body>
<div class = "menu">
</div>
<div class = "content">
</div>
</body>
CSS
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC; /* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
}
.content {
width: 90%;
margin: 0 auto;
overflow: hidden;
background-color: yellow;
height: 800px;
}
Ответы 3
Вы должны использовать top: 0 в меню div и укажите такое же поле, как высота Nav, в вашем случае 100 пикселей рабочий код здесь
<body>
<div class = "menu">
</div>
<div class = "pageTest">
</div>
</body>
css отредактирован
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC; /* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
top:0;
}
.pageTest {
width: 90%;
margin: 0 auto;
overflow: hidden;
background-color: yellow;
height: 800px;
margin-top:150px
}
Надеюсь я ответил на твой вопрос
position: fixed удаляет элемент из обычного потока документов. Установка поля для этого элемента не повлияет на окружающие элементы.
Ваша маржа должна быть добавлена к .content, а не к .menu.
.menu также потребуется top: 0, чтобы поле не сдвигало его вниз по странице.
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC;
/* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
top: 0; /* Added */
}
.content {
width: 90%;
margin: 0 auto;
margin-top: 55px;
overflow: hidden;
background-color: yellow;
height: 800px;
margin-top: 125px; /* Added */
}<div class = "menu">
</div>
<div class = "content">
</div>
Видеть :Случай, когда .pageTest находится над .menu
As position:fixed в блоке .menu div удаляет элемент из потока, а затем блок .pageTest корректируется соответствующим образом, что в данном случае заставляет его начинать с верхней позиции документа.
Итак, мы можем просто передать position:relative в .pageTest div, чтобы управлять top property.
.pageTest {
//other css properties..
position: relative;
top: 150px;
}
Предоставление top:100px запустит div .pageTest сразу после div .menu.
Таким образом добавлен 50px, чтобы иметь пробел между двумя div.
body {
padding: 0px;
margin: 0px;
}
.menu {
background-color: #9FACEC; /* Medium blue */
position: fixed;
width: 100%;
margin: 0;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
height: 100px;
}
.pageTest {
width: 90%;
margin: 0 auto;
overflow: hidden;
background-color: yellow;
height: 800px;
position: relative;
top: 150px; // can be adjusted accordingly
}<body>
<div class = "menu">
</div>
<div class = "pageTest">
</div>
</body>