Относительная позиция, вызывающая попадание контента на панель навигации - PullRequest
Новая
       2

Относительная позиция, вызывающая попадание контента на панель навигации

0 голосов
/ 12 мая 2018

У меня есть навигационная панель, которая имеет свою позицию fixed.Если я даю содержимое позиции тела relative, это вызывает перемещение этого содержимого через панель навигации вместо перемещения под панелью навигации.Я пытался дать navBar более высокие z-index значения, но это не сработало.Есть ли обходной путь?(Использование transform(translate()) также приводит к тому, что содержимое с этим стилем применяется сверху.)

PS Предоставление z-index из -1 для содержимого, для которого установлено relative позиционирование или применено transformможет сделать содержание, чтобы идти внизу.Но тогда я должен применить это ко всему содержанию страницы.Поэтому я бы предпочел что-то, что можно сделать проще.

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

Код для иллюстрации проблемы.

1 Ответ

0 голосов
/ 12 мая 2018

Привет, мой друг, я думаю, этот код может быть лучше, чем твой, проверь его 

<!DOCTYPE html>
<html>
<head>
	<title>exircice</title>
	<!--styling -->
	<style type="text/css"> 
	.navbar 
	{
		background-color: red;
		width:100vw;
  		position: fixed;
 		left: 0;
  		right: 0;height:40px;
  		z-index: 2;
	}

.content 
	{
  		position: relative;
 		top: 45px;
  		height: 1000px;
  		background: #000;
  		z-index: 1;
	}

	</style>
</head>
<body>
    <!--navbar -->
	<div class="navbar">
		<p>text here</p>
	</div>

	<!--navbar -->
	<div class="content"> <!--navbar -->
	</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...