Search code examples
navigationpositionz-indexoverlapoverlapping

Navigation bar overlapping content text

my content text is being overlapped by my navigation bar. I have looked at other questions like this, but i have not been able to fix this.
I think that it might be because of my "z-indexes". I need the functionality of the page to stay somewhat the same as now, i just need to be able to see the top of the content text.

I believe that the code i have put in here should be enough to see what the solution to this problem could be.

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>

Solution

  • Your source code is not formatted well in here but in these cases I add a padding-top to the container or a margin-top to the child.

    e.g. (you need to choose a better class name than textbox but anyway)

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