Как сделать так, чтобы у элемент был с самого начала на нужной позиции?

Question

[moneymakerXA]

Есть header, позиция которого зафиксирована. Проблема в том, что следующий блок частично попадает под него при первоначальном местоположении

header {
			width: 100%;
			height: auto;
			position: fixed;
		}

		.header {
			width: 70%;
			margin: 0 auto;
			padding: 7px 20px;
		    border: 1px solid rgba(204,204,204,.5);
		    border-top: none;
		    border-radius: 0 0 5px 5px; 
		    margin-bottom: 25px;
	        font-family: Georgia,serif;
	        font-size: 19px;
	        background-color: white; 	
		}

<header>
		<div class="mdl-grid header">
			<div class="under-mail">
				<span>Михаил Блажко | <span class="under-mail-text">Официальное интернет представительство</span></span>
			</div>
			<div class="mdl-cell--8-col"><a href="tel:[phone]" class="tel">Контактный телефон: [phone]<img src="img/icon-viber.png" class="tel"></a></div>
			<div class="mdl-cell--4-col mail-position"><a href="mailto:[e-mail]" class="mail" title="Почта для связи">Почта: [e-mail]</a></div>
		</div>
	</header>
	<!--Шапка-->
	<div class="logo"><img src="img/blazhko_m.i.jpg">
		<div class="logo-footer"></div>
	</div>
	<!--end of шапка-->

Answer 1

[Вадим Белкин]

Поскольку блок с фиксированным позиционированием он выпадает из общего потока и все что было после него поднимается по потоку вверх (на место этого блока). Чтобы такого не было вам нужно каким-то способом сдвинуть содержимое после блока вниз на величину его высоты, ну наприм, если шапка у вас в самом начале кода, вы можете добавить для body вверхний паддинг равный высоте данного шапки. Если же резмер динамический и может меняться, то придется задействовать скрипты.
Еще советую почитать про position sticky (или тут), возможно это лучше подойдет для решения проблемы

Comments

[moneymakerXA]

Сайт адаптивный и все поплывет. Может есть какие-то замены, или как вариант какая-то мысль, чтобы на js запилить

[Вадим Белкин]

moneymakerXA, дописал свой ответ. position sticky может вам поможет?