浏览器中元素的定位类型

网页中元素的定位用由position属性确定，分为绝对定位，相对定位。除此之外还有浮动定位。position的取值有staic，absolute，fixed，relative等几种，但static是默认值，而fixed值尚未支持。CSS的float属性用于指定网页元素浮动的方向，任何元素都可以浮动，而且浮动元素会生成一个block型的盒子。以下是几种定位的图例：

相对

相对定位—正常的定位然后按要求的增量移动。

图18：相对定位

浮动

一个浮动盒子会偏移到一行的左边或右边。有趣的特点是其它盒子会围绕着它。下面的HTML：

<p>
<img style="float:right" src="images/image.gif" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>

看起来象这样：

图19：浮动

绝对和固定

不管普通布局，准确的定位布放位置。元素不参予普通流程。座标是相对于容器的。在固定定位时—容器是视口。

图20：固定定位

注意—固定框体就算文档滚动了也不会改变位置。

分层展现

在z-index这个CSS属性里指定。它代表盒子的第三个座标，它是沿Z轴定位的。

盒子被分拆到栈里（称为栈内容）。在每个栈里后面的元素会首先被绘制，前面的元素在顶部，离用户最近。在有重叠的情况下会挡住先前的元素。

这个栈依据z-order属性来排序。有“z-index”属性的盒子组成了一个本地栈。视口有一个外栈。

例如：

<STYLE type="text/css">
div {
    position: absolute;
    left: 2in;
    top: 2in;
}
</STYLE>
<P>
    <DIV
        style="z-index: 3;background-color:red; width: 1in; height: 1in; ">
    </DIV>
    <DIV
        style="z-index: 1;background-color:green;width: 2in; height: 2in;">
    </DIV>
</p>

结果会是这样：

图20：固定定位

尽管红色div比绿的更靠前，在正常流程中更早绘制，但它的z-order属性值更高一些，所以它在根盒的栈中更靠上一些。

原文地址：http://taligarsiel.com/Projects/howbrowserswork1.htm

作者引用资源：

1. Browser architecture

1. Grosskurth, Alan. A Reference Architecture for Web Browsers. http://grosskurth.ca/papers/browser-refarch.pdf.

2. Parsing

1. Aho, Sethi, Ullman, Compilers: Principles, Techniques, and Tools (aka the “Dragon book”), Addison-Wesley, 1986

2. Rick Jelliffe. The Bold and the Beautiful: two new drafts for HTML 5. http://broadcast.oreilly.com/2009/05/the-bold-and-the-beautiful-two.html.

3. Firefox

1. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers. http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtml.

2. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers(Google tech talk video). http://www.youtube.com/watch?v=a2_6bGNZ7bA.

3. L. David Baron, Mozilla’s Layout Engine. http://www.mozilla.org/newlayout/doc/layout-2006-07-12/slide-6.xhtml.

4. L. David Baron, Mozilla Style System Documentation. http://www.mozilla.org/newlayout/doc/style-system.html.

5. Chris Waterson, Notes on HTML Reflow. http://www.mozilla.org/newlayout/doc/reflow.html.

6. Chris Waterson, Gecko Overview. http://www.mozilla.org/newlayout/doc/gecko-overview.htm.

7. Alexander Larsson, The life of an HTML HTTP request. https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request.

4. Webkit

1. David Hyatt, Implementing CSS(part 1). http://weblogs.mozillazine.org/hyatt/archives/cat_safari.html.

2. David Hyatt, An Overview of WebCore. http://weblogs.mozillazine.org/hyatt/WebCore/chapter2.html.

3. David Hyatt, WebCore Rendering. http://webkit.org/blog/114/.

4. David Hyatt, The FOUC Problem. http://webkit.org/blog/66/the-fouc-problem/.

5. W3C Specifications

1. HTML 4.01 Specification. http://www.w3.org/TR/html4/.

2. HTML5 Specification. http://dev.w3.org/html5/spec/Overview.html.

3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. http://www.w3.org/TR/CSS2/.

6. Browsers build instructions

1. Firefox. https://developer.mozilla.org/en/Build_Documentation

2. Webkit. http://webkit.org/building/build.html

（全文完）