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

Question

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?

Thats what absolute (and fixed) positioning does. It removes the element from the normal flow of the DOM and places it somewhere specific (in your case top: 0, left:0) The rest of the elements no longer recognize it as being on the page and flow as if its not there. — sn3ll, Apr 17 '17 at 14:23
Won't mark this as a dupe as the other Qs don't solve your problem of setting something to the width of the entire page, but as for why `position: absolute` causes the problem it does, that is answered here: [Why isn't my margin working with position: fixed?](https://stackoverflow.com/questions/33132586/why-isnt-my-margin-working-with-position-fixed/33132765#33132765) and here: [With no z-index, why does an early sibling covers up a later sibling in DOM?](https://stackoverflow.com/a/23617700/2756409). — TylerH, May 10 '19 at 14:10

Johannes · Answer 1 · 2017-04-17T14:37:20.573

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>

score 0 · Answer 2 · answered Apr 17 '17 at 14:16

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

score 0 · Answer 3 · answered Apr 17 '17 at 14:49

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.

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

3 Answers3