HTML精确定位之位置参数乱炖一锅

一、前言

　　公司项目，需要在一个图片的右上角放置一个类似“X”的东西（其实是需要显示一个数字，就像微信一样，在右上角显示几个消息），然后需要用到html的定位，看了几个网上的例子，恍惚间看到了一个offset，好奇心驱使，去查了一下html的offset，居然“拔出萝卜带出泥”（理解字面意思就行），居然搂出一箩筐的东西，不深究一下心里直痒痒（好奇心害死猫~），所以网上到处查，但是看来看去，刚看出一点眉目，别人评论我看的文章说“说的不对，误人子弟”，自此网上陷入“罗生门”，没办法，只能挽起裤脚，脱掉鞋子，下泥塘自己摸鱼~最终在https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement找到相应的英文解释，然后自己手动敲了一些代码，再结合网上一些帖子，算是比较清晰的理解了接下来需要解释的一些概念，这边顺便记录一下，希望对看官也有所帮助，分享是一种情怀~

二、位置参数

 　　在解释各个位置参数之前，先来一张网上流传甚广的一张图~

1、scrollHeight：内容的实际高度，不管是否已经用纵向滚动条浏览过，只读

　　The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum height (where height includes padding but does not include border and margin) the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.
语法：
var intElemScrollHeight = element.scrollHeight;

2、scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过，只读

    The Element.scrollWidth read–only property returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.
语法：
var xScrollWidth = element.scrollWidth;

3、scrollTop：用纵向滚动条已经滚过的高度，可读可写

    The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.

语法：
// Get the number of pixels scrolled 
var  intElemScrollTop = someElement.scrollTop;

// Set the number of pixels scrolled 
element.scrollTop = intValue;

4、scrollLeft：用横向滚动条已经滚过的宽度，可读可写

    The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.
    Note that if the element's direction of the element is rtl (right-to-left) then scrollLeft is 0 when the scrollbar is at its rightmost position (at start of the scrolled content) and then increasingly negative as you scroll towards the end of the content.
 语法：

 // Get the number of pixels scrolled
 var sLeft = element.scrollLeft;

 // Set the number of pixels scrolled
 element.scrollLeft = 10;

（元素未滚过部分(高) = scrollHeight - scrollTop - clientHeight;元素未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth;）

5、offsetHeight：border+padding+horizontal scrollbar+height(CSS)，只读

　 The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.
   Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
    In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".
    This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)
语法：

var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

6、offsetWidth：border+horizontal padding+vertical scrollbar+width(CSS)，只读

    The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
　　In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.positionof the element itself is set to "fixed".
　　This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

语法：

var offsetWidth =element.offsetWidth;

7、offsetTop：当前节点的左上角相对于offsetParent的内侧，在Y轴（以offsetParent左上角为原点，向下为Y轴正方向，向右为X轴正方向）的偏移量，只读

    The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
    topPos is the number of pixels from the top of the closest relatively positioned parent element.
    In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".
    This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)
语法：
var topPos = element.offsetTop;

8、offsetLeft：当前节点的左上角相对于offsetParent的内侧，在X轴（以offsetParent左上角为原点，向下为Y轴正方向，向右为X轴正方向）的偏移量，只读

    The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
    For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
    However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use Element.getBoundingClientRect() to get its position). Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.
　　In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.positionof the element itself is set to "fixed".
　　This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

语法：
var left = element.offsetLeft;

9、clientHeight：元素内部高度，即内容可视区域的高度，包含padding，但是剔除margin和border以及水平滚动条的高度，只读

    The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's  the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
    clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).
语法：
var h = element.clientHeight;

10、clientWidth：元素内部宽度，即内容可视区域的宽度，包含padding，但是剔除margin和border以及竖直滚动条的宽度，只读

    The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
语法：
var intElemClientWidth = element.clientWidth;

11、clientTop：The width of the top border of an element in pixels，只读

    The width of the top border of an element in pixels. It does not include the top margin or padding. clientTop is read-only.
    Gecko-based applications support clientTop starting with Gecko 1.9 (Firefox 3, implemented in bug 111207). This property is not supported in Firefox 2 and earlier.
语法：
var top = element.clientTop;

12、clientLeft：见英文解释，这边需要说明一下，当文字从右到左显示的时候，竖直滚动条可以在左边，此时clientLeft=border+left vertical scrollbar，只读

    The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only.
    Gecko-based applications support clientLeft starting with Gecko 1.9 (Firefox 3, implemented in bug 111207). This property is not supported in Firefox 2 and earlier.
    When layout.scrollbar.side preference is set to 1 or to 3 and when the text-direction is set to RTL, then the vertical scrollbar is positioned on the left and this impacts the way clientLeft is computed.
语法：
var left = element.clientLeft;

三、附录一

JS OffsetParent属性深入解析

　　offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

　　句法：
　　　　parentObj = element.offsetParent

　　变量：
　　　　parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　　<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<script type="text/javascript" language="JavaScript">
  　　　　function offset_init() {
  　　　　var pElement = document.getElementById("sonObj");
  　　　　　　parentObj = pElement.offsetParent;
  　　　　　　alert(parentObj.tagName);
    　　　}
　　　　</script>
　　　　</head>
　　　　<body onload="offset_init()">
　　　　　　<div id="parent">
　　　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　　　</div>
　　　　</body>
　　</html>

　　测试结果：

Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY

结论：当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

 

　　测试代码2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<style type="text/css">
　　　　　　#parent {
    　　　　　　position: absolute; <!-- position：relative; -->
    　　　　　　left: 25px;
    　　　　　　top: 188px;
    　　　　　　border: 1px solid black;
　　　　　　}
　　　　</style>
　　　　<script type="text/javascript" language="JavaScript">
    　　　　function offset_init() {
　　　　　　　　var pElement = document.getElementById("sonObj");
　　　　　　　　parentObj = pElement.offsetParent;
　　　　　　　　alert(parentObj.tagName);
    　　　　}
　　　　</script>
　　</head>
　　<body onload="offset_init()">
　　　　<div id="parent">div测试代码
　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　</div>
　　</body>
</html>

测试结果：

Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"

结论：当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素

 

　　测试代码3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<style type="text/css">
　　　　　　#Grandfather {
    　　　　　　position: relative;
    　　　　　　left: 25px;
    　　　　　　top: 188px;
    　　　　　　border: 1px solid black;
　　　　　　}
　　　　</style>
　　　　<script type="text/javascript" language="JavaScript">
　　　　　　function offset_init() {
　　　　　　　　var pElement = document.getElementById("sonObj");
　　　　　　　　parentObj = pElement.offsetParent;
　　　　　　　　alert(parentObj.tagName);
    　　　　}
　　　　</script>
　　</head>
　　<body onload="offset_init()">
　　　　<h1 id="Grandfather">
　　　　　　<div id="parent">
　　　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　　　</div>
　　　　</h1>
　　</body>
</html>

测试结果：

Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"

结论：当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

四、引用/参考

https://developer.mozilla.org/en-US/docs/Web/API/Element

http://www.mamicode.com/info-detail-646876.html

http://www.cnblogs.com/quanhai/archive/2010/04/19/1715231.html

http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

http://zhidao.baidu.com/link?url=q3c1Am2o9VMNaIZ5ZBK_yc8RGg6OiC9eDuhQ1Nx3agdKr7Z0C6UeJ2WtHn9697goUOfQ9O8xtU_nZfub5ZKHpIwI8fvdjuMGNY19ufQmmPK