Position属性在CSS布局中的应用

蒋昀昕

(福建卫生职业技术学院公共基础部，福建 福州 350101)

Position属性在CSS布局中的应用

蒋昀昕

(福建卫生职业技术学院公共基础部，福建 福州 350101)

本文在基于盒子模型的基础上简单介绍了C SS布局概念，对比分析了CSS中Position属性的四个属性值，并通过具体的网页布局实例进一步说明Position属性中的绝对定位和相对定位在C SS布局中的应用。

C SS布局；定位；盒子模型；标准文档流

1 引言

随着Web技术的不断发展，如何设计和布局网页以使网站能更好地运行，逐渐成为网站设计开发人员广泛关注的话题。常用的网页布局方法主要有三种：表格布局、CSS布局、框架布局。本文在基于CSS盒模型布局的基础上，阐述了Position属性的概念，并通过具体的网页布局实例说明如何利用定位属性进行页面布局。

2 CSS布局简介

CSS的布局排版是一种新的排版理念，完全有别于传统的排版习惯。首先它将页面从整体上进行

盒子模型是CSS布局页面时一个很重要的概念。在使用CSS布局时，所有页面中的元素都看成是一个盒子，占据着一定的页面空间。一个页面由很多这样的盒子组成，如何定位这些盒子是CSS布局的一个重点。CSS布局的核心是Position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素或者另一个元素甚至浏览器窗口本身的位置。

3 Position属性概念

Position属性的含义是用来指定页面中块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。该属性有4个值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。Static是属性的默认值，也就是该盒子按照标准流进行布局。

(1)静态定位：在静态定位情况下，每个元素都处在常规文档流中[2]。如图1所示，这是一个简单标准流方式的两层盒子。父层中包含两个子层，所有的块级元素都是静态定位。在默认的静态定位下，块级元素在页面中自上而下堆叠起来。要想突破静态定位提供的这种按顺序布局元素的方式，必须把盒子的Position属性设置为其它三个值。

图1 静态定位

(2)相对定位：使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。使用相对定位时，除了将Position属性设置为relative之外，还需要指定一定的偏移量，可以通过left、right、top以及bottom四个方向来设定。如图2所示，将Box-1设置为相对定位，同时设置上、左偏移量为30px。与前面静态定位的图相比，Box-1的位置以自身为基准向上和向左各偏移了30px，而Box-2的位置没有任何变化，好像Box-1还在原来位置上。所以，使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置，并且对父级盒子和兄弟盒子都没有影响。

图2 相对定位

(3)绝对定位：使用相对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如图3所示，左图的父级元素定位属性设置为relative，Box-2偏移量设置为向上、向右偏移各30px。因此，Box-2以父级元素为基准，从左上角开始向下和向左各移动30px。右图的父级元素定位属性为static，Box-2偏移量设置为上、右偏移为0，此时Box-2以浏览器窗口作为定位基准。所以，绝对定位的块级元素，如果没有已经定位的祖先元素，则以浏览器窗口为基准定位。“已经定位”指的是Position属性被设置为除了static以外的任意一种方式，那么该元素就被定义为已经定位的元素。“最近”是指在一个节点的所有祖先节点中，找出所有“已经定位”的元素中距离该节点最近的一个节点。绝对定位的盒子从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响。

图3 绝对定位

(4)固定定位：固定定位与绝对定位类似，区别在于定位的基准不是祖先元素，而是浏览器窗口。当拖动浏览器窗口滚动条时，固定定位元素将保持相对于浏览器窗口不变的位置。如图4所示，Box-2的位置不会随着滚动条的拖动而改变。

图4 固定定位

4 网页布局实例分析

网页中元素布局方式主要有三种：标准流、浮动和定位。除非专门指定，否则所有元素都在标准流中定位。即网页中的各种元素按照HTML结构自左向右、自上而下的布局方式。在标准流里，块级元素自上而下排列，行内元素自左向右排列。

设置了浮动属性的框脱离了标准流，它可以向左或者向右移动直到它的外边缘碰到了包含框或另一个浮动框的边框为止。如果包含块太窄，无法容纳水平排列的浮动框，那么其它浮动块会向下移动，直到有足够多的空间。如果浮动框的高度不同，那么当它们向下移动时可能会被其它浮动框卡住。浮动框会脱离标准文档流，因此对于其它元素来说，浮动框是不存在的。定位机制主要应用了Position属性中的相对定位和绝对定位。需要注意的是，使用相对定位的元素框不管它是否进行移动，元素框仍然占据原有的位置，即相对定位的元素框没有脱离文档流。而绝对定位则与之相反，使用绝对定位的元素框会脱离标准文档流，所以它可以覆盖页面上的其它元素，通过设置z-index属性来控制这些框的堆放次序。下面以具体网页布局实例来说明Position属性的使用。

图5 “易购网”网页

图6 网页布局分析图

该“易购网”网页结构采用的是DIV+CSS进行布局。如图6所示，网页整体划分为三个板块：#top版块、#l_sidebar版块和r_content版块。网页总体结构为上下结构，主体部分为左右结构。实现左右结构的布局方法有多种，过去经常使用浮动属性来实现，在本例中采用Position属性的绝对定位来实现。具体方法如下：将#box设置为#top子块、#l_sidebar子块、#r_content子块最近的定位祖先元素，即设置#box块的Position属性为relative（相对定位）；同时将#l_sidebar子块与#r_sidebar子块的Position属性设置为absolute（绝对定位），并配合设置top、left、right属性，从而实现左右布局。CSS代码如下：

#box{

Width:990px;

Margin-top:10px;

Position:relative;

}

#top{

Margin-bottom:10px;

Position:absolute;

Left:5px;

Top:10px;

}

#l_sidebar{

Position:absolute;

Width:190px;

Left:5px;

Top:30px;

}

#r_content{

Width:770px;

Position:absolute;

Top:30px;

Right:0px;

Height:285px;

}

其中，r_content版块中嵌套了多个DIV，并且部分层与层之间出现了位置的重叠与覆盖。为了实现这种布局结构，可以将这些子DIV的Position属性全部设置为绝对定位。需要特别注意的是，绝对定位元素框的位置是相对于离它最近的定位祖先元素来定位的。因此，在本例中将#r_content元素的Position属性设置为absolute（绝对定位）。#r_content元素可看作是其内部嵌套子块的最近的定位祖先元素，将嵌套子块的Position属性也设置为absolute（绝对定位），并对每一个子块设置一定的偏移量，从而实现图中右侧的布局结构。在本例中，将最外层块元素#box定位属性设置为relative（相对定位），其余各子块定位属性全部设置为绝对定位。核心CSS代码如下：

#apDiv1{

Position:absolute;

Width:89px;

Height:89px;

Left:4px;

Top:4px;

}

#apDiv2{

Position:absolute;

Width:180px;

Height:240px;

Left:55px;

Top:30px;

}

#apDiv3{

Position:absolute;

Width:150px;

Height:240px;

Left:250px;

Top:30px;

}

#apDiv4{

Position:absolute;

Width:150px;

Height:240px;

Left:410px;

Top:30px;

}

在使用Position属性进行定位时，要注意一点是，Position属性不能自适应内部元素的高度，因此本例#r_content块中的各个子块都需要设置高度来固定其大小。

5 结论

如果用Position来布局页面，属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位其在父级块中的位置，此时需要配合设置top、left、bottom和right属性进行定位。

[1]Charles Wyke-Smith．CSS设计指南（第3版）[M]．北京：人民邮电出版社，2013．

[2]温谦．C SS设计彻底研究[M]．北京：人民邮电出版社，200 8．

Application of Position in CSS Layout

Jiang Yunxin
(Fujian Medical College,Fuzhou 350101,Fujian)

This paper introduces the conception of CSS layout based on the box model.It makes comparative analysis on the four property values of the Position attribution,and illustrates the application of the relative attribution and the absolute attribution of Position in CSS layout by a specific case.

CSS layout；Position；box model；normal document stream

TP393.092

A

1008-6609(2016)10-0058-03

蒋昀昕（19 8 4-），女，安徽合肥人，硕士，讲师，研究方向为优化算法。