HTML DOM元素的定位问题

一、基本概念

1. 一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即"块框"。与之相反，span 和 strong 等元素称为"行内元素"，这是因为它们的内容显示在行中，即"行内框"。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>

some text

<p>Some more text.</p>

</div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

2. CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box） ，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

二、需要设置的参数

1. Window对象的属性

|-------------|---------------------|----|-----------------|
| 属性名 | 含义 | 只读 | 支持浏览器 |
| outerWidth | 当前窗口带外框的宽度 | 是 | |
| outerHeight | 当前窗口带外框的高度 | 是 | |
| innerWidth | 窗口文档显示区的宽度 | 是 | |
| innerHeight | 窗口文档县市区的高度 | 是 | |
| pageXOffset | 当前页面相对于窗口显示区左上角的X位置 | 否 | |
| pageYOffset | 当前页面相对于窗口显示区右上角的Y位置 | 否 | |
| screenLeft | 窗口左上角在屏幕上的x坐标 | 是 | IE、Safari、Opera |
| screenTop | 窗口左上角在屏幕上的y坐标 | 是 | IE、Safari、Opera |
| screenX | 窗口左上角在屏幕上的x坐标 | 是 | Firefox、Safari |
| screenY | 窗口左上角在屏幕上的y坐标 | 是 | Firefox、Safari |

2. Screen对象的属性

|-------------|-----------------------|----|-------|
| 属性名 | 含义 | 只读 | 支持浏览器 |
| availHeight | 显示屏幕上除Windows任务栏之外的高度 | 是 | |
| availWidth | 显示屏幕上除Windows任务栏之外的宽度 | 是 | |
| deviceXDPI | 显示屏幕的每英寸水平点数 | 是 | |
| deviceYDPI | 显示屏幕的每英寸垂直点数 | 是 | |
| height | 显示屏幕的高度 | 是 | |
| width | 显示屏幕的宽度 | 是 | |
| logicalXDPI | 显示屏幕的每英寸常规水平点数 | 是 | |
| deviceYDPI | 显示屏幕的每英寸常规垂直点数 | 是 | |

3. DOM元素相应的属性

|--------------|-----------------|----|
| 属性名 | 含义 | 只读 |
| clientHeight | 元素的可见高度 | 是 |
| clientWidth | 元素的可见宽度 | 是 |
| offsetHeight | 元素的高度 | 是 |
| offsetWidth | 元素的宽度 | 是 |
| offsetLeft | 元素的水平偏移量（最左端为0） | 是 |
| offsetTop | 元素的垂直偏移量（最顶端为0） | 是 |
| offsetParent | 元素的偏移容器 | 是 |
| parentNode | 元素的父节点 | 是 |
| scrollHeight | 元素的整体高度 | 是 |
| scrollWidth | 元素的整体宽度 | 是 |
| scrollTop | 元素上边缘与视图之间的距离 | 是 |
| scrollLeft | 元素左边缘与视图之间的距离 | 是 |

4. CSS相关参数

|----------|-----------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|
| 参数 | 作用 | 取值 | 含义 | 示例 |
| position | 设置元素的定位 | static | 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 | |
| | | relative | 相对定位。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本占的空间仍保留。 相对定位是相对于元素在文档中的初始位置。 | |
| | | absolute | 绝对定位。元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 绝对定位的元素的位置相对于最近的已定位祖先元素，如果该元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 | |
| | | fixed | 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。 | |
| display | 设置元素外框的类型 | Inline | 内框 | |
| | | none | 无 | |

|---------|-----------------------------------------------------|---------|-------------------------------------------------|---------------------------------------------------------------------------------------|
| z-index | 可以设置元素的显示优先级 | 负整数 | 取值越低，则该元素越先"堆放"在页面上，其他元素可以按照z-index的次序依次覆盖在它上面。 | 使用z-index设置底图 |
| | | 0 | 默认值 | |
| | | 正整数 | 取值越高，则该元素就"堆放"在越靠顶端的位置上，可以覆盖掉取值低的元素。 | |
| float | 定义元素向哪个方向浮动。在CSS中，任何元素都可以浮动，这个属性用于图像的时候，使文本围绕在图像周围。 | none | 默认值。元素不浮动，并会显示其在文本中出现的位置。 | |
| | | left | 元素向左浮动。 | |
| | | right | 元素向右浮动。 | |
| | | inherit | 继承父元素float属性的值。 | |
| left | 根据position的设置，确定左偏移位置，单位是像素px | | | |
| top | 根据position的设置，确定自上向下的距离顶部的偏移量，单位是像素px | | | |

三、举例

例1 元素的水平偏移量和垂直偏移量

<p>元素在初始定位的时候，其段前默认偏移量是16个像素（16px）。

源码：

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM元素定位演示</title> <style type="text/css"> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> </head> <script> window.onload=function winload() { var dom_offset_left=document.getElementById("offsetLeft"); alert('起始左偏移量：'+dom_offset_left.offsetLeft); alert('起始垂直偏移量：'+dom_offset_left.offsetTop); dom_offset_left.innerHTML="Outer width of this window is "+window.outerWidth+"px"; dom_offset_left.innerHTML=dom_offset_left.innerHTML+"<br>Inner width of this window is "+window.innerWidth+"px"; dom_offset_left.innerHTML=dom_offset_left.innerHTML+"<br>Outer height of this window is "+window.outerHeight+"px"; dom_offset_left.innerHTML=dom_offset_left.innerHTML+"<br>Inner height of this window is "+window.innerHeight+"px"; dom_offset_left.style.position="relative"; dom_offset_left.style.left="30px"; alert('变更后的左偏移量：'+dom_offset_left.offsetLeft); } </script> <body> <p id="offsetLeft">起始位置</p> </body> </html> |

本程序给出窗口尺寸和水平偏移量设置。设置水平偏移或垂直偏移，需要设置style的positon，以及style的left、right属性来实现。