蒋昀昕

(福建卫生职业技术学院公共基础部，福建 福州 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属性的含义是用来指定页面中块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。……