0

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.

Here is my css:

body
{
background-image:url('images.jpg');
background-repeat:repeat-x;

}

.mainpage { margin-top:100px; width:900px; margin:auto; }

.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;
 }

HTML

<div class="menuwrap">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Query</a></li>
           <li><a href="#">Reports</a></li>
       </ul>
    </div>
</div>

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?

Thanks!

jenna salva
  • 205
  • 3
  • 12

1 Answers1

0

Absolutely positioned elements are relative to a container positioned relatively. If none is specified, it's relative to the window. I've never heard of/see anything about problems with position and screen resolution... other than the fact that your browser might change width/height when your resolution changes?

this is all regardless of if there is anything set in the css for the html/body width & height.

Shan Robertson
  • 2,742
  • 3
  • 25
  • 43
  • I'm kinda lost here with the CSS terms. Sorry I'm totally newbie. But as far as I know, the resolution and the size of the window, or size of the monitor, affects the position of an absolute element. – jenna salva Aug 12 '13 at 21:53
  • you're a newbie but your codes are pretty much complicated. I recommend you start with simpler examples first. – Ali Çarıkçıoğlu Aug 12 '13 at 22:00
  • Actually it is not just a test that I'm conducting, it is part of my asp.net project. That's why I'm using what I need in my project not just for testing or learning purpose. – jenna salva Aug 12 '13 at 22:10
  • Jenna, your assumptions are wrong. It's the size of your browser window that would effect absolutely positioned elements and only in some cases, not all the time. – Shan Robertson Aug 12 '13 at 22:34