0

我只是想知道，因为我一直听说绝对位置会在不同的分辨率下弄乱页面。出于某种原因，即使没有将它包裹在相对元素周围，它对我来说也能正常工作。这怎么可能？我只是想明白。

这是我的CSS：

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

}

.mainpage { 边距顶部：100px; 宽度：900 像素；边距：自动；}

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

我想指出我没有在body元素中设置任何东西，只有图片背景。再说一次，我只是想了解以避免将来出现任何问题。我认为将绝对值包含在相对值中可以避免此类问题，但即使我删除了相对值，显然也没有任何变化。我使用称为分辨率测试的 chrome 扩展进行了测试。我还有一个问题，当你将一个元素设置为相对时，它是相对于它的主体还是它顶部的元素？如果它的顶部没有元素，它是否与主体大小有关，如果主体中没有设置宽度或高度，那么它是如何工作的？

谢谢！

4

1 回答 1

0

绝对定位的元素是相对于相对定位的容器而言的。如果没有指定，它是相对于窗口的。我从来没有听说过/看到任何关于位置和屏幕分辨率的问题......除了当你的分辨率改变时你的浏览器可能会改变宽度/高度？

这完全不管css中是否为html/body宽度和高度设置了任何东西。

于 2013-08-12T21:46:09.397 回答