Html 添加相对位置后，整个站点向下移动
在我加载了包含一些jquery的数字图像之后，整个站点向下移动 可能是因为我使用的Html 添加相对位置后，整个站点向下移动,html,css,Html,Css,在我加载了包含一些jquery的数字图像之后，整个站点向下移动 可能是因为我使用的位置：relative？忽略为某些元素插入的2px边框I。我想检查元素所包含的区域 注: 食物的大图像与图像滑块-硬币滑块有关 我拍摄的屏幕截图中没有显示页脚 HTML: 导致站点下移的不是jQuery，而是您的numb1div div元素占用页面空间。由于默认情况下div具有display:block，因此它占据了页面顶部的整个“行”区域，即您放置它的位置。设置position:relative允许您更改numb
位置：relative2px边框导致站点下移的不是jQuery，而是您的
numb1divdivdivdisplay:blockposition:relativenumb1position:absolutenumb1从你的评论来看，我猜你想定位相对于你的标志和其他数字的数字，而不需要在不同的屏幕分辨率上重叠。一种方法是将所有数字放在页面顶部（包括
numb1div位置：relativenumb1位置：绝对divnumb1div中只有数字，这基本上允许您相对于数字定位numb1
。导致站点下移的不是jQuery，而是numb1
div
div
元素占用页面空间。由于默认情况下div
具有display:block
，因此它占据了页面顶部的整个“行”区域，即您放置它的位置。设置position:relative
允许您更改numb1
的位置，但仍在页面上的原始位置占用相同的空间（与以前相同的位置）
纠正这种情况的一种方法是使用position:absolute
，这将从文档流中删除numb1
编辑：
从你的评论来看，我猜你想定位相对于你的标志和其他数字的数字，而不需要在不同的屏幕分辨率上重叠。一种方法是将所有数字放在页面顶部（包括numb1
）的一个div
，并带有位置：relative
。然后，您可以给出numb1
位置：绝对
。这将允许您相对于包含的div
定位numb1
。由于您的div中只有数字，这基本上允许您相对于您的数字定位numb1
。无需查看全部内容…这一行的“*”不是*$（“#numb1'）.hide（）.delay（800）.fadeIn（'normal'）给你带来麻烦？那双@PeterPajchl怎么办，把它去掉了。问题仍然存在。@stetro，删除了多余的
。尝试将#numb1
更改为位置：绝对
，而不查看整件事…这一行的“*”不是*$（“#numb1”）.hide（）.delay（800）.fadeIn（'normal'）给你带来麻烦？那双@PeterPajchl怎么办，把它去掉了。问题仍然存在。@stetro，删除了多余的
。请尝试将#numb1
更改为位置：绝对
，这对我来说也很有意义+1谢谢。你的解决方案奏效了。它现在是相对于容器div
的。另一方面，当我在IE9中加载小鸡标志img和页脚img时，它丢失了，有什么原因吗？^解决了这个问题。空的宽度
和高度
显然不适合IE。这对我来说也是有意义的+1谢谢。你的解决方案奏效了。它现在是相对于容器div
的。另一方面，当我在IE9中加载小鸡标志img和页脚img时，它丢失了，有什么原因吗？^解决了这个问题。空的宽度
和高度
显然不适合IE。
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="coin-slider/coin-slider-styles.css" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script src="jqfloat/jqfloat.js"></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width:900, navigation: true, delay: 3000, hoverPause: true, effect: 'random' });
$('#numb1').hide().delay(800).fadeIn('normal');
});
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" width="" height="" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div id="navbar">
<ul>
<li class="OP" id="OPM1"><img src="images/order.png" /><a href="Orders.html">Orders</a></li>
<li class="OP" id="OPM"><img src="images/menupic3.png" /><a href="Menu.html">Menu</a></li>
<li class="OP"><img src="images/contact.png" /><a href="ContactUs.html">Contact</a></li>
<li class="OP"><img src="images/Pen.png" /><a href="AboutUs.html" target="_blank">About Us</a></li>
<li class="OP"><img src="images/pin.png" /><a href="Jobs.html">Jobs</a></li>
</ul>
</div>
<div id='coin-slider'>
<img src='images/slideshow1x.png' />
<span>
Description for img01
</span>
<img src='images/slideshow2x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow3x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow4x.jpg' />
<span>
Description for img01
</span>
</div>
<footer>
<figure id="footerBg">
<img src="images/BG_F_S3.png" alt="Footer Background" width="" height="" />
</figure>
<div id="ftex">
<ul>
<li> © 2012 Foodstant Delivery </li>
<li><a href="Sitemap.html">Sitemap</a> </li>
<li id="ss">Search Site </li>
</ul>
</div>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding:0;
}
@font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
body {
background-image: url('images/BG-W1.png');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
height: 790px;
/*border: 2px solid blue;*/
#logo {
float:left;
}
#abtex {
float: left;
border:2px solid blue;
}
#navbar {
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
position: relative;
top:-50px;
clear:left;
font-size: 26px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 20px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
li a:link {
color: #EF174A;
}
li a:visited {
color: #BF4100;
}
li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
#footerBg {
position: relative;
bottom:-63px;
left:-50px;
}
#footerBg img {
display: block;
}
#footertex {
position: relative;
top:-80px;
/*border:2px solid black;*/
}
#ftex {
position: relative;
}
#ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
#ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
#ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
#ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#numb1 {
position: relative;
/*border:10px solid red;*/
top:100px;
border:2px solid red;
right:-750px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}