HTML CSS問題與位置屬性

我有下面的代碼HTML CSS問題與位置屬性

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery goes to DOM-ville</title> 
    <style> 

     #change-me { 
      position:absolute; 
      top:500px; 
      left:400px; 
      font:24px arial; 
     } 

     #move_up #move_down #color #disappear { 
      padding:5px; 
     } 

    </style> 
    <script src="jquery-1.6.2.js"></script> 
</head> 
<body> 
    <button id="move_up">Move Up</button> 
    <button id="move_down">Move Down</button> 
    <button id="color">Change Color</button> 
    <button id="disappear">Disappear/Re-appear</button> 

    <div id="change_me">Make me do stuff</div> 
    <script> 
     $(document).ready(function(){ 
      $("#move_up").click(function(){ 
       $("#change_me").animate({top:30}, 200); 
      });//end move up 
      $("#move_down").click(function(){ 
       $("#change_me").animate({top:500}, 2000); 
      });//end move down 
      $("#color").click(function(){ 
       $("#change_me").css("color","purple"); 
      });//end color 
      $("#disappear").click(function(){ 
       $("#change_me").toggle("show"); 
      });//end disappear 
     });//end doc ready 
    </script> 


</body> 
</html>

當我在Firefox中打開HTML（jQuery的文件是在同一文件夾）

，爲元素的樣式規則顯示由螢火蟲是零，並且移動起來和下移按鈕不工作，但是他們改變了各自的CSS樣式，當我改變了下面一行

<div id="change_me">Make me do stuff</div>

這個

<div id="change_me" style="position:absolute;">Make me do stuff</div>

一切似乎再次起作用，所以我的假設是頭元素中的任何樣式都不應用於html元素，如果是的話，它們的重點是什麼，如果它們被應用，那麼它們爲什麼被覆蓋。

我的瀏覽器是火狐11.0 MacOSX的

來源

2012-04-12 Vaibhav Mishra

change-me

change_me

兩者是不一樣的。

來源

2012-04-12 14:30:43

一個典型的「過於本地化」的問題。 – thirtydot 2012-04-12 14:31:49

HTML CSS問題與位置屬性

回答

相關問題