导航栏重叠内容文本答案

【问题标题】：Navigation bar overlapping content text导航栏重叠内容文本
【发布时间】：2014-12-19 23:01:11
【问题描述】：

我的内容文本与我的导航栏重叠。我看过其他类似的问题，但我无法解决这个问题。
我认为这可能是因为我的“z-indexes”。我需要页面的功能与现在保持相同，我只需要能够看到内容文本的顶部。

我相信我在这里输入的代码应该足以看到这个问题的解决方案是什么。

p, div, a
{
    font-family: "Century", sans-serif;
}

ul 
{
	list-style-type: none;
}

li
 {
	display: inline-block;
	padding: 0;
	margin: 0;
	font-size: 15px;
}

nav
{
	text-align: center;
}

img 
{
	min-height: 100%;
	min-width: 100%;
}

.content
 {
	z-index: -10;
	position: fixed;
	text-align: center;
	min-height: 100%;
	min-width: 100%;
}

.textbox
 {
	z-index: -5;
	position: absolute;
	margin-left: 11%;
	margin-top: 1%;
	text-align: left;
	color: #000000;
}

.rubrik
{
	font-size: 35px;
	font-weight: bold;
}

.brod
{
	font-size: 18px;
}

.header
{
	box-shadow: 0px 4px 25px #000000;
	position: fixed;
	width: 100%;
	background-color: #FFFFFF;
}

body
{
	margin: 0;
}

html
{
	overflow-y: scroll;
}

<body>
	<div class="wrapper">
		<div class="header">
			<nav>
				<ul>
					<li> <a href="index.php">FORSIDE</a> </li>
					<li> <a href="nyheder.php">NYHEDER</a> </li>
					<li> <a class="currentpage" href="hvem-er-vi.php">HVEM ER VI?</a> </li>
					<li> <a href="om-moellevangen.php">OM MØLLEVANGEN</a> </li>
					<li> <a href="vaerdigrundlag.php">VÆRDIGRUNDLAG</a> </li>
					<li> <a href="vedtaegter.php">VEDTÆGTER</a> </li>
					<li> <a href="galleri.php">GALLERI</a> </li>
					<li> <a href="kontakt.php">KONTAKT</a> </li>
				</ul>
			</nav>
		</div>

		<div class="content">
			<img src="files/forside3.png"/>
		</div>	
		
<div class="textbox">
	<p class="rubrik">
	Bestyrelsen
	</p>

	<p class="brod">
	Formand:</br>
	Anne, Galsted</br>
	Tlf: </br>
	Mobil: </br>
	</br>
	Næstformand:</br>
	Niels, Agerskov</br>
	Tlf: </br>
	Mobil: </br>
	</br>
	</p>
</div>

</body>

【问题讨论】：

标签： navigation position z-index overlap overlapping

【解决方案1】：

您的源代码在此处的格式不正确，但在这些情况下，我向容器添加了 padding-top 或向子元素添加了 margin-top。

例如（你需要选择一个比文本框更好的类名，但无论如何）

div.textbox
{
    margin-top: 60px;
}

【讨论】：

感谢您的帮助。我还将我的课程重命名为更好的名称。