每当浏览器调整大小时，我网站横幅上的 Logo 图像都拒绝保持不变。它将直接位于横幅中间它应该位于的位置，但是一旦我开始缩小浏览器的宽度，它就会开始上升。为什么是这样？有人可以帮我解决这个问题吗？
下面是我使用的 html 和 css 代码。
HTML:
<HTML>
<HEAD>
<TITLE>BLB</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE1.CSS">
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 1000px)"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".TYPEHERE").fadeToggle();
});
});
</script>
</HEAD>
<BODY>
<div id="page-wrap">
<h1>
<div id="logo"><img src="images/blb2.png"></div>
<div class="cart"><img src="images/cart3.png"></div>
<a href="http://www.facebook.com" target="_blank"><div id="fb"><img src="images/fb.png"></div>
<a href="http://www.instagram.com" target="_blank"><div id="insta"><img src="images/insta.png"></div>
<a href="http://www.twitter.com" target="_blank"><div id="twitter"><img src="images/twitter.png"></div>
<a href="http://www.youtube.com" target="_blank"><div id="tube"><img src="images/tubee.png"></div>
<ul id="nav">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">Store</a></li>
<li><a href="blog.html">Articles</a></li>
<li><a href="store.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</h1>
<div id="footer">
<tfooter>©2014 Blacklipbastard.com All Rights Reserved.</tfooter>
</div>
</div>
</BODY>
</HTML>
CSS:
html { overflow-y: scroll;}
body { font: 62% helvetica, sans-serif; width: 100%; background: url(images/bg1.jpg); background-size: 200%; }
h1 {background-color: #000; background-size: 100%; position: absolute; height: 18%; width: 100%; left: 0%; top: -1.8%; border-style: solid; border-color: gray; border-radius: 20px 20px 0 0; padding-top: 0%; background-repeat: no repeat; border-width: 2px;}
#logo { position: absolute; top: -140%; left: 22%; width: 50%;}
img {max-width: 100%;}
.cart {position: relative; top: 50%; left: 94%;}
.cart img {width:5%; height:30%;}
#nav {background:url(images/nav2.jpg) ; position: absolute; border-style: solid; left:0%; top:73%; width: 96%; height:19%; border-right: 2px solid #000000;}
#nav li {position: relative; list-style-type: none; float: left; width: 10%; top: 20%; border-right: 2px groove #000; padding: 0 10px;}
#nav a{text-decoration: none; color: white; font-size: 20px; position: relative;}
#nav a:hover{background: url(images/nav.jpg); color: silver;}
#fb {position: absolute; top: 40%; width: 3.5%; top: 89.5%; left: 80%; height: 15%; z-index: 1}
#insta { position: absolute; left: 85%; width: 2.8%; top: 89.5%; height: 13%; z-index: 1}
#twitter { position: absolute; width: 3.5%; top: 89.5%; left: 95%; height: 15%; z-index: 1}
#tube { position: absolute; top: 89.5%; width: 3.5%; left: 90%; height: 15%; z-index: 1}
#fb img{ Width:95%; Height:110%;}
#insta img{ Width:95%; Height:110%;}
#twitter img{ Width:95%; Height:110%;}
#tube img{ Width:95%; Height:110%;}
#footer { position: absolute; font: verdana #fff; left: 2.8%; bottom: 3%; border-top-style: double; border-color: #E8E8E8 ; padding: 0 48%; }
tfooter {position: absolute; left: 3%}
#page-wrap{
width: 80%;
height: 150%;
margin: 8.5%;
background: #fff;
padding: 20px;
position: relative;
top: -7%;
border-radius: 20px;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";}
最佳答案
因为您的图片有 100% 的宽度。当您调整浏览器大小时，它会自动放大。尝试将 max-width 添加到 Logo 。 :)
关于html - css定位: item keeps moving whenever the browser is resized，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25050997/