Because of the need to locate an HTML element (such as: div) distance from the top of the page, want to use offsettop to take value, the result is found in CSS if the use of float:left, and so on, it will lead to the value of a different.
Float:left is not used; The value is normal value 200;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The influence of <title>float on offsettop </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312"/>
<meta name= "Copyright" content= "(c)"/>
<meta name= "Author" content= "Cnlei"/>
<style type= "Text/css" media= "All" >
body {margin:0;padding:0;}
#Top {height:100px;}
#Main {padding:100px;}
#IECN {width:200px;height:50px;background: #f00; color: #fff;}
</style>
<script type= "Text/javascript" >
<!--
function Showit (o) {
alert (o.offsettop);
}
-->
</script>
<body>
<div id= "Top" > #Main {padding:100px} is not using the Float property, the offsettop value is normal: 200. </div>
<div id= "Main" >
<div id= "IECN" onclick= "Showit (this);" > Click here to try </div>
</div>
</body>
Using the Float:left, the value is turned to 100, without a 100.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The influence of <title>float on offsettop </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312"/>
<meta name= "Copyright" content= "(c)"/>
<meta name= "Author" content= "Cnlei"/>
<style type= "Text/css" media= "All" >
body {margin:0;padding:0;}
#Top {height:100px;}
#Main {Padding:100px;float:left}
#IECN {width:200px;height:50px;background: #f00; color: #fff;}
</style>
<script type= "Text/javascript" >
<!--
function Showit (o) {
alert (o.offsettop);
}
-->
</script>
<body>
<div id= "Top" > #Main {padding:100px;float:left} uses the Float property, the offsettop value is only 100, 100 less for no reason. </div>
<div id= "Main" >
<div id= "IECN" onclick= "Showit (this);" > Click here to try </div>
</div>
</body>
