Question

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

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

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>

Answer 1

您的源代码格式不正确，但在这些情况下，我会在容器中添加填充顶部或向子代添加margin-top。

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

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

导航栏重叠内容文本

1 个答案: