Position 属性在CSS网页布局中的应用技巧

梁静琳

(武汉工程职业技术学院 湖北 武汉：430080)

Position 属性在CSS网页布局中的应用技巧

梁静琳

(武汉工程职业技术学院 湖北 武汉：430080)

介绍了position属性在网页设计中的作用及其基本设置方法，并利用position属性制作CSS下拉菜单，体现了position属性定位功能的灵活性。

position；CSS网页布局

在CSS网页设计中，与布局相关的属性设置的使用技巧体现了设计者的设计水平。基本的属性主要有margin、padding、float等，这些属性在网页设计教学中也是重点内容，而在网页布局中还会经常使用position属性对元素进行定位。position一般做为网页设计的高级应用属性，在教学中通常不会作为学习者的重点学习内容，从而学习者很少去深入了解position的使用技巧。事实上，position属性更能体现元素定位的灵活性，在网页布局中发挥重要的作用，本文中就通过介绍如何通过position属性实现CSS下拉菜单体现position属性的应用技巧。

1 position属性

position是定位属性，即规定元素的定位。在CSS布局中，盒子模型是核心，网页布局由各种大小的“盒子”组成，而“盒子”的定位除了默认设置，还可以用position属性进行个性化设置，因此，在CSS布局中，position发挥着非常重要的作用。定位能使元素通过设置相应的偏移值定位到页面的任何一个地方，定位功能非常灵活。

position在CSS面板中的定位类中设置，如图1所示。

2 position属性设置与偏移属性设置

2.1 position属性设置

position的属性取值有四种，即static、relative、absolute和fixed。通过这四种属性设置元素是否脱离文档流进行定位，再通过 top、left、bottom、right四个偏移属性定义元素在定位属性定位下从基准位置发生偏移。

图1 position属性在CSS面板中的定义

position的属性取值中，static是默认定位值，对象遵循正常文档流，top、right、bottom、left等属性不会被应用；relative是相对定位，这里的相对是指元素相对于原本在文档中的位置，依据top、right、bottom、left等属性值在正常文档流中偏移位置，虽然元素脱离了原来的文档流的布局，但对象遵循正常文档流，在文档流的位置遗留空白区域；absolute是绝对定位，对象脱离正常文档流，使用top、right、bottom、left等属性进行绝对定位，遗留下来的空间由后面的元素填充；position被设置为fixed的元素，对象脱离正常文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

这里所说的文档流，是指将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

在实际应用中，定位属性的取值中用得最多的是绝对定位(absolute)和相对定位(relative)。定义为绝对定位属性的盒子的位置以它的包含框为基准进行定位，所谓包含框，是指距离它最近的设置了定位属性的父级元素的盒子，如果它所有的父级元素都没有设置定位属性，那么包含框就是页面文档窗口，即以屏幕左上角原点为坐标原点。绝对定位的元素对其他元素的盒子的定位没有影响，对于其他盒子，就好像这个盒子完全不存在。如果对一个元素定义相对定位属性(position:relative;)那么它将保持在原来的位置上不动。如果再对它通过top、left属性值设置垂直或水平偏移量，那么它将“相对于”它原来的位置发生移动。

2.2 偏移属性设置

偏移属性是指使元素在定位属性定位下从基准位置发生的偏移量，偏移属性分别是top、left、bottom、right四个属性，设置方法如下所示：

top：指相对于定位基准的上边向下偏移的量。

right：指相对于定位基准的右边向左偏移的量。

bottom：指相对于定位基准的下边向上偏移的量。

left：指相对于定位基准的左边向右偏移的量。

它们的取值可以为像素，也可以是百分比。在实际应用中，四种偏移属性值不会同时设置，常用的属性是top 和left。

3 利用position属性设置制作CSS下拉菜单

下拉菜单是网页中常见的高级界面元素。一般下拉菜单都用JavaScript制作，如在Dreamweaver中使用“行为”就可制作下拉菜单，但这样制作的下拉菜单界面不美观，而且代码复杂，如果使用CSS来制作下拉菜单，它的代码更简洁、界面更美观，而且占用的资源更少。

制作CSS下拉菜单的原理就是利用position属性对一级导航项与下拉菜单的定位设置，下拉菜单的特点是弹出时浮在网页上的，不占据网页空间，所以放置下拉菜单的元素必须设置为绝对定位元素，而且下拉菜单位置是依据它的导航项来定位的，同时导航项要固定其位置，所以导航项应该设置为相对定位，作为下拉菜单的定位基准。当鼠标滑到导航项时，显示下拉菜单；当鼠标离开时，设置下拉菜单元素的display设置为none，则下拉菜单就被隐藏起来。制作下拉菜单方法如下：

下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单。首先写出它的结构代码，此时显示效果如图2所示。

图2 下拉菜单基本结构

可以看到下拉菜单被写在内层的ul里，只需要控制这个ul元素的显示和隐藏就能实现下拉菜单效果。

设置第一层li为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界。此时显示效果如图3。再设置导航项li为相对定位，让下拉菜单以它为基准定位。代码如下：

#nav,#nav ul{ padding:0;margin:0;text-align:center;list-style-type:none;}

li {float: left; width: 120px; position:relative; }

图3 下拉菜单水平排列——设置第一li 左浮动

设置下拉菜单为绝对定位，位于导航项下24px，left设置为0px。默认状态下隐藏下拉菜单ul，所以display设置为none。

li ul{ display:none; position:absolute; left:0px; top:24px; }

再添加交互，当鼠标滑过时显示下拉菜单ul。此时在Firefox中就可以看到鼠标滑过时弹出下拉菜单的效果了，如图4，只是不太美观

li:hover ul{ display:block; }/*IE 6不支持非a元素的伪类，故IE6不显示下拉菜单*/

图4 添加了交互的下拉菜单——当鼠标滑过时显示下拉菜单

此时，由于IE6浏览器不支持li:hover伪类，所以无法弹出菜单，通过后面的JavaScript代码解决该问题。

最后改变下拉菜单的CSS样式，使它更美观，并添加交互效果，代码如下，最终在Firefox中的效果如图5所示。

ul li a{display:block;font-size:14px;border:1px solid #ccc;text-align:center;padding:3px;

text-decoration: none;color:#333;height:1em; /*解决IE 6的bug */}

ul li a:hover{background-color:#f4f4f4;color:#FF0000;}

图5 对下拉菜单进行美化后的效果

此时，页面如果在IE6浏览器中是看不到效果的，因此还需要解决兼容IE6浏览器的问题，这里采用的方法是在网页中插入下面一段JavaScript代码，插入的地方是在之后之前。代码如下：

并添加一条CSS选择器，代码如下，使JavaScript能动态地为li元素添加、移除“.over”这个类控制“li ul”的显示和隐藏。

li.over ul{display:block;}

将此应用技巧应用到实际页面设计中，并用CSS进行美化外观，实现效果如图6 所示。

图6 CSS下拉菜单在实际页面运用的效果图

4 结论

position 属性是一个在CSS布局中能让元素“随心所欲”定位的属性，通过position属性设置，元素可以脱离文档流，定位在文档中的任何位置，这样使得元素与元素之间的位置灵活设置。position属性的设置核心是对static、relative、absolute和fixed的理解，特别是对相对定位relative和绝对定位absolute属性的理解和灵活运用。如果一个元素设置position 为relative，将根据top、right、bottom、left的值按照它理应所在的位置进行偏移，偏移的基点是根据它原来的位置，relative的“相对的”意思也正体现于此。而发生偏移后，相对于原来的位置留下的空白区域仍然存在，其它元素不得占用。如果一个元素设置position 为absolute，该元素偏移位置的基点有两种可能性：一，当该元素有父对象，并且父对象也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时该元素就以这个父对象作为基点进行定位；二，当该元素不存在一个有着position属性的父对象，那么就以文档作为基点进行定位。

在本文的CSS下拉菜单案例中，第一级导航项的li元素就是下拉菜单的li ul元素的父对象，当li元素的position设置为relative，li ul元素的position设置为absolute时，li ul元素是根据li元素的位置发生偏移，因此li ul元素的偏移值设置为“left:0px; top:24px;”使得下拉菜单仅在第一级导航项的纵向发生了偏移。

因此，如果掌握了position 属性的属性值的设置，也就能在CSS网页布局中灵活地对元素进行定位，做出外表美观、结构紧凑、代码优化的页面。

[1] Position_百度百科[EB/OL] http://baike.baidu.com

[2] HTML DOM position 属性[EB/OL] http://www.w3school.com.cn/jsref/prop_style_position.asp

[3] 朱印宏.CSSS商业网站布局之道[M].北京：清华大学出版社，2007：246-255.

[4] 唐四薪.基于Web标准的网页设计与制作[M].北京：清华大学出版社，2011：157-160.

[5] 苗冬霞.网页设计与制作实用教程[M].武汉：华中科技大学，2014:165-167.

(责任编辑：李文英)

An Application Skill of Position Property in CSS Web Layout

LIANG Jinglin

(Wuhan Engineering Institute, Wuhan 430080, Hubei)

Position property and its function and basic set methods in web design are introduced in this article. A CSS pull-down menu is developed by the position property, which shows the flexible location-based features of the position property.

position; CSS web layout

2015-03-16

2015-05-22

梁静琳(1981～)，女，硕士，讲师.E-mail:ljl@wgxy.net

TP393.092.2

A

1671-3524(2015)02-0055-04