CODEWITHSUNDEEP
htmlcss
danny bee
danny bee

Reputation: 870

position:absolute css menu hides my h2 element, how to overcome this?

I made a menu and used width: 100% to make sure it comes across the entire page but there were white spaces on the right and left side (looks more like width:95%?) So I then tried using position:absolute top:0 left:0 which solved the problem and made the menu look like width 100%,

Unfortunately, this operation caused my h2 header element to disappear and I cannot find a way to properly place it now?

JSBin code of my html and css code

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding:0;
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;
}

#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;

}
li {
display:inline;
}

footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;


}
<!DOCTYPE html>

<html>
  <head>
  <title>Miko</title>
  <link href="#" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div id="menu">
      <ul id="mainMenu">
        <li><a href="#">HOME</a></li>
	    <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT ME</a></li>
      </ul>
    </div>	
    <h2>About The Page</h2>
    <p>To Be Added</p>
    
	<footer>
	  <p>Web Design</p>
	</footer>
  
  </body>




</html>

How come position:absolute makes my h2 disappear?

Upvotes: 0

Views: 770

Answers (3)

sharad jain
sharad jain

Reputation: 1581

Position in css is tricky thing, everyone uses absolute positioning for placement of element.but before using it. you need to know about what the position is all about. when we use position:absolute then element act like it is floating on top of all element.while using absolute positioning element goes out from html normal flow.

you have used position absolute for both menu links and footer, So these elemment are floating on top of other elements.enter code here

use position absolute and fixed when you want to stick element to specific position.

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding:0;
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;
}

#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;

}
li {
display:inline;
}

footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;
}

if you still want to use position absolute for menu, so you need to use proper margin for h2 tag.so that h2 tag will not be hidden beside menu links.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

To avoid the default margins in general, you can add margin: 0; to html and body.

To place your absolutely positioned menu behind the h2element, you can apply z-index: -1, which moves it behind its parent element.

In my snippet below I also changed the text-centering to right alignment and added a padding-right on the ul. You can play around with those values so they fit your needs.

html, body {
margin: 0;
}
#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
padding-right: 30px;
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;
}

#menu {
text-align:right;
width:100%;
height:50px;
background-color:paleGoldenRod;
position: absolute;
z-index: -1;
}
li {
display:inline;
}

footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;


}
<!DOCTYPE html>

<html>
  <head>
  <title>Miko</title>
  <link href="#" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div id="menu">
      <ul id="mainMenu">
        <li><a href="#">HOME</a></li>
	    <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT ME</a></li>
      </ul>
    </div>	
    <h2>About The Page</h2>
    <p>To Be Added</p>
    
	<footer>
	  <p>Web Design</p>
	</footer>
  
  </body>




</html>

Upvotes: 1

Itay Ganor
Itay Ganor

Reputation: 4205

Add padding-top: 50px (the menu height) to body.

body {
  padding-top: 50px;
}

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding:0;
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;
}

#menu {
text-align:center;
width:100%;
height:50px;
background-color:paleGoldenRod;
position:absolute;
left:0;
top:0;

}
li {
display:inline;
}

footer {
background-color:SlateGray;
height:150px;
width:100%;
position:absolute;
bottom:0;
left:0;


}
<!DOCTYPE html>

<html>
  <head>
  <title>Miko</title>
  <link href="#" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div id="menu">
      <ul id="mainMenu">
        <li><a href="#">HOME</a></li>
	    <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT ME</a></li>
      </ul>
    </div>	
    <h2>About The Page</h2>
    <p>To Be Added</p>
    
	<footer>
	  <p>Web Design</p>
	</footer>
  
  </body>




</html>

JSBin

Upvotes: 0

Related Questions