CSS布局中DIV绝对定位语法

开发 前端
CSS布局中实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项中的绝对定位,第二种则是使用CSS中的浮动(float)概念,这里重点描述一下DIV绝对定位的用法。

本文向大家介绍一下CSS布局中DIV绝对定位的用法,DIV绝对定位的优势在于,我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分,相信本文介绍一定会让你有所收获。

CSS布局中DIV绝对定位

CSS布局中实现分栏布局有两种方法。***种方法是使用四种CSS定位选项(absolute、static、relative和fixed)中的绝对定位(absolutepositioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。DIV绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用,也可以结合在一起,相辅相成,这里重点说明一下DIV绝对定位的用法。

DIV绝对定位

DIV绝对定位的优势在于,我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除,所以它也不会为其他元素带来任何的影响。
那么让我们试一试用绝对定位如何实现下面的布局。

DIV绝对定位

这是一个三栏的布局,并且是居中显示的。其中,A栏是主体内容栏,B栏和C栏都是侧边栏。首先,我们不可能直接用DIV绝对定位将A、B、C三栏定位到居中的位置,因为每个人显示器的分辨率是不同的,在1024X768分辨率的显示器上定位的居中效果,在别的分辨率的显示器上看到的效果肯定不会是居中显示的,那么,该如何解决这个问题呢?

幸好,在DIV绝对定位模型中有个极为有用的特性,那就是:若某个绝对定位元素的容器也被定位过,那么该元素指定的top和left值将不会基于文档的根元素html(也就是浏览器窗口的左上角)计算,而是会基于其容器的左上角计算这个偏移量。换句话说,也就是:被定位过的容器将扮演其中所有元素绝对定位起始点的角色。

所以,利用这个特性,我们给A、B、C栏的外部加上一个容器D,如下图:

A、B、C栏的外部加上一个容器D后效果

然后,我们让容器D居中,并给它加上一个属性:position:relative,这样,再用DIV绝对定位定位A、B、C的top和left值,A、B、C的位置就会基于容器D的左上角的位置来计算了,这样就可以实现我们期望的三栏居中的效果了。

但是,我们常用的布局并没有这么简单,除了三栏之外,我们还需要一个页头和一个页脚,如下图:

页眉页脚布局

这时候,再用DIV绝对定位布局就行不通了,因为绝对定位的元素会从文档流中完全移除,这时,页脚会紧挨着页头,显示在页头的下方。
如果我们一定要采用绝对定位的话,那么必须预先知道这三栏中每一栏的高度,然后再根据其中***的一栏定位页脚。若是任意一栏中的文本长度无法确定的话,除了使用JavaScript,我们也只能放弃绝对定位的念头,转而投入到浮动布局的怀抱。
 

【编辑推荐】

  1. CSS clip属性基本语法解析
  2. CSS导航菜单的四个优点
  3. CSS+DIV相对定位和绝对定位的区别和联系
  4. CSS属性display:inline-block使用揭秘
  5. DIV CSS解决不规则文字排版问题

 

 

 

责任编辑:佚名 来源: 1lou.net
相关推荐

2010-09-01 14:02:27

绝对定位浮动CSS

2010-09-10 12:40:06

CSS相对定位CSS绝对定位

2010-09-14 17:07:26

DIV浮动定位CSS

2010-09-13 13:12:57

CSS定位

2010-09-10 13:07:51

CSS DIV绝对定位CSS DIV固定定位

2010-08-17 11:10:16

DIV+CSS

2010-09-14 16:39:26

CSS DIV相对定位CSS DIV绝对定位

2010-09-14 17:20:03

CSS DIV相对定位

2010-08-16 08:54:48

DIVCSS

2010-08-16 11:28:02

DIV

2010-08-26 16:48:48

DIV绝对定位相对定位

2010-09-07 15:38:42

CSS绝对定位浮动

2010-09-06 11:17:19

CSS相对定位CSS绝对定位

2010-09-10 11:32:23

CSS绝对定位CSS相对定位

2013-02-19 10:24:47

瀑布流布局CSS

2010-08-24 11:00:55

DIV CSS

2010-08-16 14:18:49

DIV+CSS

2010-09-06 13:15:48

CSS定位

2010-09-09 15:17:01

absoluterelativeCSS

2010-08-25 14:45:57

CSS绝对定位
点赞
收藏

51CTO技术栈公众号