CSS element position 计算公式

以下部分element.style的属性值需要用到parseInt(value || 0)来转换。

• clientWidth ＝ element.style.paddingLeft + element.style.width + element.style.paddingRight
  
• clientHeight = element.style.paddingTop + element.style.height + element.style.paddingBottom
  
• clinetLeft = borderLeftWidth
  
• clientTop = borderTopWidth
  
• clientRight = offsetWidth - clientWidth - clientLeft
  
• clientBottom = offsetHeight - clientHeight - clientTop
  
• element.style.left = element.offsetLeft - element.style.marginLeft
  
• element.style.top ＝ element.offsetTop - element.style.marginTop
  

当元素的offsetParent不是BODY时，上面最后二个公式需要特别注意。

关于CSS中的position和float的二点说明

1、当float的元素的margin为负值时，其周边元素内容可能会覆盖到float元素上面。当float元素宽度大于容器宽度并margin为负值时，会使得float元素在容器二边都超出。
2、position: absolute的元素的一系列上级元素如果具有position:absolute/relative/fixed属性时，会根据其上级元素进行绝对定位。如果其上级元素没有position属性，则根据整个html文档定位。

[CSS Zen Garden] CSS absolute position and relative position explain

Absolute Positioning:
Understanding absolute positioning means understanding the concept of the document flow.
Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist.
Relative positioning:
Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there.
A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.
Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

#extraDiv1 {
background-image:url(Dragon.gif);
background-position:left top;
background-repeat:no-repeat;
height:206px;
left:-360px;
margin:0pt auto;
position:relative;
top:-225px;
width:96px;
}

reference:
http://www.csszengarden.com/?cssfile=070/070.css

[CSS Zen Garden] Position fixed property of CSS2 and IE6

Exploiting the fact that Internet Explorer lacks support for fixed positioning and for child selectors, a series of rules were created to deliver the optimal design to browsers that comply with the rules of CSS, and to deliver the alternate design to Internet Explorer:

body#css-zen-garden>div#extraDiv2 {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;
}

The following CSS is applied only in browsers that don't understand the previous rule, in this case Internet Explorer. Because the child selectors imply greater specificity, the former rule takes precedence, but only if the browser understands it.

div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable.

IE7 has supported position fixed property if it’s in standard mode.
reference:
http://www.csszengarden.com/?cssfile=037/037.css

prototype javascript library Position example

<div id="d1" style="left: 228px; top: 24px; width: 200px; height: 36px;">
<a href="#" id="a1">a1</a>
<br/> 
</div>
<div id="d2">
<a href="#" id="a2">a2</a>
<br/>
</div>
<div id="d3">d3</div>
<script type="text/javascript" charset="utf-8">
 function doc(argument) {
  document.write("<p>\n");
  document.write(argument);
  document.write("</p>\n");
 }
 var a2 = $('a2');
 var d1 = $('d1');
 var d2 = $('d2');
 var d3 = $('d3');
 doc('a2.offsetWidth = ' + a2.offsetWidth);
 doc('a2.offsetHeight = ' + a2.offsetHeight);
 doc(Position.within(a2, 18, 38));
 doc(Position.realOffset(a2).inspect());
 doc(Position.cumulativeOffset(a2).inspect());
 doc(Position.offsetParent(a2));
 doc(Position.overlap('vertical', a2));
 doc(Position.page(a2).inspect());
 Position.absolutize(a2);
 //Position.relativize(a2);
 Position.clone(d1, d3);
</script>