title: Absolute position is working fine on different resolutions even if there is no relative position element on the top of it
body: <p>I was just wondering as I've always heard that absolute position messes up the page on different resolution. For some reason, it is working fine for me even without wrapping it around a relative element. How is that possible? I just want to understand.</p>
  
  <p>Here is my css:</p>
  
  <pre><code>body
  {
  background-image:url('images.jpg');
  background-repeat:repeat-x;
  
  }
  </code></pre>
  
  <p>.mainpage
      {
      margin-top:100px;
      width:900px;
      margin:auto;
      }</p>
  
  <pre><code>.gridline {
  content:""; 
  height:1px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
  width:100%;
  display:block;
  }
  .empbox 
   {
  height:30px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#6C8483 50%,#FFFFFF 100%);
  width:100%;
  display:block;
  color:White;
  margin-top:190px;
  padding-top:10px;
  clear:both;
  
  }
  
  .menu
  {
  color:black;
  margin-top:-110px;
  position:absolute;
  }
  .menu ul
   {
   list-style:none;
   display:inline;
   float:left;
   padding-left:40px;
   }
   .menu li { float:left; margin-left:20px;}
   .menu li:hover 
   {
   padding:0px 15px 0px 15px;
   font-size:xx-large;
   font-style:italic;
   border-bottom:3px solid #6C8483;
   padding-bottom:10px;
  
   } 
   .menu li a { 
  text-decoration:none;
  font-style:oblique;
  color:black; 
  font-weight:bolder;
  font-size:large;
  }
   .menuwrap 
   {
    overflow:visible;
    position:relative;
   }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="menuwrap"&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Query&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to point out that I haven't set anything in the body element, only a picture background. And again, I just want to understand to avoid any future problems. I thought that wrapping an absolute inside a relative avoids such issue, but apparently nothing changes even if I remove the relative. I conducted my test using chrome extension called resolution test. Also I have a question, when you set an element to relative, what is it relative to, the body or the element on the top of it? And if there is no element on the top of it, is it relative to the body size and if there is no width or height set into the body then how does it functions?</p>
  
  <p>Thanks!</p>