Почему моя маржа не работает с position: fixed?

Демо JSFiddle

у меня есть div для заголовка и div для переноса содержимого.

по какой-то причине у меня не может быть поля в нижней части заголовка, которое заставляет перенос содержимого нажимать вниз. Он просто полностью игнорирует это, и я понятия не имею, почему.

кто-нибудь знает, что происходит с этим? Он не делает этого, когда я забираю атрибут position: fixed; в заголовке, но я хочу, чтобы он был исправлен вверху, поэтому при прокрутке заголовок всегда находится в поле зрения.

надеясь, что кто-то может объяснить, почему это происходит или, по крайней мере, как это называется, чтобы я мог его google. 

body {
    margin: 0;
    padding: 0;
	font-family: arial;
	background: #5A9910;
	text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* ==========================Header with logo==*/
div.header {
	position: fixed;
	width: 100%;
	background: #ffffff;
	-webkit-box-shadow: 0 8px 6px -6px #333;
	-moz-box-shadow: 0 8px 6px -6px #333;
	box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
	width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
	width: 80%;
	height: 1600px;
	background: #ccc;
	margin: 0 auto;
}
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>
6
css css-position html

4 ответов

Я думаю, вы должны четко объявить позицию фиксированного div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

и назначить маржу на содержание div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

проверьте эту скрипку, если работает как нужно: https://jsfiddle.net/0cmvg92m/3/

5

когда вы устанавливаете элемент position: fixed;, вы удаляете его из"обычного потока документов". Представьте, что ваш сайт-это река, и вы смотрите на нее сверху вниз. Каждый элемент-камень в этой реке. Любой margin вы применили к своим элементам, как силовое поле вокруг одного из этих камней.

при установке

если вы margin к этой скале, это силовое поле вокруг скалы больше не удерживает от нее воду, потому что скала парит в воздухе благодаря своему position: fixed; собственность. Таким образом, нет воды или других пород (других элементов), от которых ей нужно дистанцироваться. Силовое поле вашего камня (запас вашей стихии) толкает против разреженного воздуха, поэтому ничто в реке не будет затронуто.

Kicking the Tower of Pisa

этот человек на самом деле не пинает падающую башню Пизы, но это действительно выглядит так! В этом примере фоном картины, включая Пизанскую башню, является ваша страница (или ваш "нормальный поток документов"), а человек-элемент (или камень из нашего последнего пример) с position: fixed; применить.

подробнее о свойстве position здесь и, более актуальную, здесь.

один из способов исправить это-установить свой заголовок top: 20px; z-index: 2; чтобы убедиться, что он расположен вверху и над каждым другим элементом на Z-плоскости, а затем дать ваше тело position: relative; и margin-top равна высоте заголовка (в данном случае 52px) плюс значение заголовка top собственность. Увеличить пространство между заголовком и телом просто увеличьте margin-top количество. Это иногда называют подходом "липкий верхний / нижний колонтитул". Вот демо:

body {
    margin: 0;
    padding: 0;
    font-family: arial;
    background: #5A9910;
    text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* ==========================Header with logo==*/
div.header {
    position: fixed;
    top: 20px;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px #333;
    -moz-box-shadow: 0 8px 6px -6px #333;
    box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
    width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
    width: 80%;
    height: 1600px;
    background: #ccc;
    margin: 0 auto;
    position: relative;
    margin-top: 72px;
}
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>

П. С. position: fixed; - это свойство CSS (пара "свойство-значение", если быть точным), а не атрибут HTML.

25

Margin не работает, потому что положение заголовка фиксировано.

вы должны использовать padding-top на вашем contentwrap.

0

ваш заголовок имеет недвижимость position:fixed. Следовательно, поле, которое вы применяете к заголовку, не влияет на раздел содержимого.

чтобы решить эту проблему, вам нужно дать либо маржу, либо дополнение к contentwrap элемент

0