0

絶対位置が異なる解像度でページを台無しにすることをいつも聞いていたので、私はただ疑問に思っていました. 何らかの理由で、相対要素をラップしなくても問題なく動作しています。そんなことがあるものか？理解したいだけです。

これが私のcssです：

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

}

.mainpage {マージントップ: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 要素には何も設定しておらず、画像の背景のみを設定していることを指摘したいと思います。繰り返しになりますが、将来の問題を回避するために理解したいと思います。相対で絶対をラップすると、このような問題を回避できると思いましたが、相対を削除しても何も変わらないようです。解像度テストと呼ばれるクロム拡張機能を使用してテストを実施しました。また、要素を相対に設定する場合、それは何に対して相対的なのか、本体またはその上の要素に対して質問がありますか? そして、その上に要素がない場合、それは本体のサイズに関連しており、本体に幅または高さが設定されていない場合、どのように機能しますか?

ありがとう！

4

1 に答える 1

0

絶対配置された要素は、相対的に配置されたコンテナに対して相対的です。何も指定されていない場合は、ウィンドウに相対的です。位置と画面解像度の問題について聞いたことも見たこともありません...解像度が変わるとブラウザが幅/高さを変える可能性があるという事実以外は?

これは、html/body の幅と高さの CSS に何かが設定されているかどうかに関係なく、すべてです。

于 2013-08-12T21:46:09.397 に答える