Ширина фиксированного блока = максимальная ширина страницы

Question

Хочу сделать фиксированный верх страницы. Делаю так:

body {
	width: 100%;
	max-width: 380px;
	height: 5000px;
	margin: 0 auto;
	padding: 0;
}

header {
	height: 50px;
	width: 100%;
	margin:0px auto;
	position: fixed;
  z-index: 9999;
  border-bottom: 1px solid #000;
}

<body>
  <header>header</header>
</body>

В итоге получается что фиксированный header уходит вправо до конца всей страницы, игнорируя body { max-width: 380px; }

Буду очень благодарен за помощь и объяснение!

Answer 1

fixed позиция выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Когда Вы объявляете её, границы положения будут фиксироваться шириной и высотой экрана. Однако, если Вы укажите max-width такой же как и у body то указанное выравнивание margin:0 auto будет работать верно. Так как данный блок позиционируется относительно исходного содержания блока, которое как я понял задаёт body как только Вы указали ему max-width.

body {
	width: 100%;
	height: 5000px;
	margin: 0 auto;
	padding: 0;
  max-width: 380px;
}

header {
	height: 50px;
	width: 100%;
	margin:0px auto;
	position: fixed;
  max-width: 380px;
  z-index: 9999;
  border-bottom: 1px solid #000;
}

<body>
  <header>header</header>
</body>

БЛОГ НА HUSL

Ширина фиксированного блока = максимальная ширина страницы

Ответы (1 шт):