CSS圖像在不同分辨率下的不同位置？

好的，所以我用一個外部CSS做了一個簡單的網頁，現在在我的電腦上看起來很好，但是當我將它發送給我的朋友時，底部的按鈕並不在一起？CSS圖像在不同分辨率下的不同位置？

HTML代碼

<body> 

<style type="text/css"> 
body { 
    overflow:hidden;  <!-- Setting body overflow to hidden --> 
} 

<!-- Background image --> 



    </style> 

    <div id="backgroundWrapper"> 
     <img src="background.png" />  
    </div> 

    <!-- Home button --> 

    <div id="homebtn"> 
     <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/> 
     </a> 
    </div> 

    <!-- Shop Button --> 

    <div id="shopbtn"> 
     <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/> 
     </a> 
    </div> 
    </body>

CSS代碼

#backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;} 
    #backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;} 
    #homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;} 
    #shopbtn {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;} 
    #text { 
    color:black; 
    font-size:15; 
    text-align:center; 
    position:relative; 
    top:20%; 
    font-family:verdana; 
    font-weight:bold; 
    } 
    #myform { 
    position:absolute; 
    left:10%; 
    top:30%; 

    } 


     #submitbuttons { 
    position:relative; 
    text-align:center; 
    top:80%; 

    } 




    body { 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px 
    }

來源

2012-12-24 Ryan Conway

您正在使用position: absolute;所以你需要用一個position: relative;容器內的子元素，使他們不會在野外

流出例如

<div class="container"> 
    <div class="firstbtn"></div> 
    <div class="secondbtn"></div> 
</div> 

<style> 
    .container { 
    position: relative; 
    height: 200px; 
    width: 500px; 
    } 

    .firstbtn { 
    position: absolute; 
     left: /* whatever */; 
     top: /* whatever */; 
    } 

    .secondbtn{ 
    position: absolute; 
     left: /* whatever */; 
     top: /* whatever */; 
    } 
</style>

所以現在無論按鈕將不會流出容器元素

的

來源

2012-12-24 14:14:39

這看起來不錯？ –

@RyanConway你是什麼意思這種看法是正確的？這顯然是正確的 –

HTML - http://i.imgur.com/RQIps.png CSS - http://i.imgur.com/UrkIL.png –

變化此CSS作爲

#backgroundWrapper{width:100%; z-index:-1;position:absolute;} 
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;} 
#button-wrapper{width:30%; margin:0 auto;top:90%;z-index:1;} 
#homebtn {position:relative;top:90%;float:left;} 
#shopbtn {float:right;}

#button-wrapper調整寬度相應創建button-wrapper，並把兩個btns在HTML

來源

2012-12-24 14:28:38 chandru

CSS圖像在不同分辨率下的不同位置？

回答

相關問題