好吧，我已经用外部 CSS 制作了一个简单的网页，现在它在我的电脑上看起来很好，但是当我把它发送给我的 friend 时，底部的按钮不在一起吗？
我的显示器 http://i.imgur.com/ektmF.png
好友监控 http://i.imgur.com/RmB3t.png
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
}
最佳答案
您正在使用 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>
所以现在两个按钮都不会流出容器元素
关于CSS图像在不同分辨率下的不同位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14022437/