Question

我有一个位置为console.log(obj.name); //prints "objectsname" console.log(obj.name); //prints "objectsname"的导航栏。如果我给出正文位置fixed的内容，则会导致该内容在导航栏上移动，而不是在导航栏下方移动。我尝试提供relative更高的navBar值，但这没有用。有没有解决方法？（使用z-index也会导致应用该样式的内容出现在最佳状态。）

P.S。将transform(translate()) -1设置为z-index定位或已应用relative的内容可以使内容进入下方。但是，我必须将其应用于页面的所有内容。所以我更喜欢可以做得更容易的事情。

我添加了一些虚拟代码来说明问题。我希望通过更改transform的css来使内容低于navbar，因为我实际上有很多内容，并且更改所有代码会很困难。

Code to illustrate the issue.

Answer 1

你好我的朋友我的事情这个代码可能会更好，然后检查它

<!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>

相对位置导致内容出现在导航栏之上

1 个答案: