Position属性在CSS布局中的应用.pdf

3、格布局的时候，在设计的最开始阶段，就要确定页面的布局形式。由于使用表格来进行布局，一旦确定下来就无法再更改了，因此有极大的缺陷。使用CSS布局则完全不同，设计者首先考虑的不是如何分割网页，而是从网页内容的逻辑关系出发，区分出内容的层次和重要性。然后根据逻辑关系，把网页的内容使用div或其它适当的HTML标记组织好，再考虑网页的形式如何与内容相适应。盒子模型是CSS布局页面时一个很重要的概念。在使用CSS布局时，所有页面中的元素都看成是一个盒子，占据着一定的页面空间。一个页面由很多这样的盒子组成，如何定位这些盒子是CSS布局的一个重点。C

4、SS布局的核心是Position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素或者另一个元素甚至浏览器窗口本身的位置。3Position属性概念Position属性的含义是用来指定页面中块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。该属性有4个值：static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。Static是属性的默认值，也就是该盒子按照标准流进行布

5、局。(1)静态定位：在静态定位情况下，每个元素都处在常规文档流中[21。如图I所示，这是一个简单标准流方式的两层盒子。父层中包含两个子层，所有的块级元素都是静态定位。在默认的静态定位下，块级元素在页面中自上而下堆叠起来。要想突破静态定位提供的这种按顺序布局元素的方式，必须把盒子的Position属性设置为其它三个值。媾。8洱1鳓豳豳隧霾蕊霪豳圈暖麓黧图圈圜氍圈霹图l静态定位(2)相对定位：使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。使用相对定位时，除了将Position属性设置为

6、relative之外，还需要指定一定的偏移量，可以通过left、right、top以及bottom四个方向来设定。如图2所示，将Box一1设置为相对定位，同时设置上、左偏移量为30px。与前面静态定位的图相比，Box．1的位置以自身为基准向上和向左各偏移了30px，而Box．2的位置没有任何变化，好像Box．1还在作者简介：蒋昀昕(1984一)，女，安徽合肥人，硕士，讲师，研究方向为优化算法。．58．嗨苯探辅·应用技术与研究原来位置上。所以，使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置，并且对父级盒子和兄

7、弟盒子都没有影响。图2相对定位(3)绝对定位：使用相对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如图3所示，左图的父级元素定位属性设置为relative，Box．．2偏移量设置为向上、向右偏移各30px。因此，Box．2以父级元素为基准，从左上角开始向下和向左各移动30px。右图的父级元素定位属性为static，Box．2偏移量设置为上、右偏移为0，此时Box-．2以浏览器窗口作为定位基准。所以，绝对定位的块级元素，如果没有已经定位的祖先元素，则以浏览器窗口为基准定位。“已经定位”指的是Position属性

8、被设置为除了static以外的任意一种方式，那么该元素就被定义为已经定位的元素。“最近”是指在一个节点的所有祖先节点中，找出所有“已经定位”的元素中距离该节点最近的一个节点。绝对定位的盒子从标准流中脱离，这