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问题与位置属性

回答

相关问题