添加相對位置後，將整個網站下移

Before loading the jquery for the fadeIn number img 添加相對位置後，將整個網站下移

After loading thr jquery for FadeIn number img

予加載其中包含一些jquery的數量圖像之後，整個網站下移。

難道是因爲我使用的是position:relative？忽略爲某些元素插入的2px border。我想檢查元素包含的區域。

注：

食品的大圖像與圖像滑塊 - 投幣式滑塊。

頁腳未顯示在我拍攝的截圖中。

HTML：

<!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>

CSS：

* { 
    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); */ 
}

來源

2012-08-08 TheKraven

不看在整個事情...是不是 '*' 在此行'* $（ '＃numb1'）隱藏（）延遲（800）.fadeIn（ '正常'）;'給你造成麻煩？ – 2012-08-08 13:35:39

雙倍「怎麼樣？在＃numb1 – stetro 2012-08-08 13:36:14

@PeterPajchl，刪除它。問題依然存在。 – TheKraven 2012-08-08 13:39:59

這並不是說是導致網站降檔jQuery的，但你的numb1div。

的div元素佔用空間的頁面上。由於div的默認設置爲display: block，因此它佔據了頁面頂部的一個完整的「行」區域，您已經放置了該區域。設置position: relative可以讓你改變的numb1的位置，但它仍然佔用相同的空間在其原始位置的頁面（在同一地點前）上。

糾正此問題的一種方法是使用position: absolute，這將從文檔流中刪除numb1。

編輯：

從您的意見來看，我猜你想不具有重疊，上不同的屏幕，分辨率問題，相對於您的標誌和其他數字的數目來定位。解決這個問題的一種方法是將所有數字放在頁面頂部（包括numb1），並將其放在一個div與position: relative之間。然後你可以給numb1position: absolute。這將允許您定位numb1相對於包含div。由於您只有div中的數字，因此您可以根據數據定位numb1。。

來源

2012-08-08 13:46:06 Zhihao

這對我也有意義+1 – 2012-08-08 14:02:39

非常感謝。您的解決方案奏效它現在相對於'container div'。在旁註中，當我在IE9中加載時，雞徽標img和footer img會丟失，請問有什麼原因？ – TheKraven 2012-08-08 15:23:07

^解決了這個問題。 IE瀏覽器顯示「寬度」和「高度」顯然不適用。 – TheKraven 2012-08-08 15:36:26

添加相對位置後，將整個網站下移

回答

相關問題