我只是想知道,因为我一直都听说绝对位置会以不同的分辨率弄乱页面。出于某种原因,即使没有将它包装在相对元素上,它也对我来说很好。那怎么可能?我只想了解。

这是我的CSS:

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

}


。主页
    {
    margin-top:100px;
    宽度:900px;
    保证金:自动;
    }

.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扩展程序进行了测试。另外我有一个问题,当您将元素设置为相对时,它相对于主体或顶部的元素是什么?并且如果它的顶部没有元素,它是否与主体尺寸有关,并且如果没有在主体中设置宽度或高度,那么它如何起作用?

谢谢!

最佳答案

绝对定位的元素相对于相对定位的容器。如果未指定,则相对于窗口。除了位置和屏幕分辨率的问题,我从未听说过/看到任何其他信息……除了当分辨率改变时浏览器可能会改变宽度/高度的事实之外?

这一切与html / body宽度和高度的css中是否设置任何内容无关。

关于css - 即使在其顶部没有相对位置元素,绝对位置也可以在不同分辨率下正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18197104/

10-14 04:38