Div CSS absolute与relative的区别小结

absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下:

  1. 没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样)。

  2. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下:

  (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定,上面例子绿色部分。

  (2). 父级有 position 属性,父级的“坐标原始点”为原始点,上面例子浅蓝色部分。

  relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用,上面例子橙色部分。

  通过上面的例子和讲解,相信熟练运用 absolute 与 relative 并不是一件很困难的事,我们周围有不少关于 absolute 与 relative 的好例子,比如“网易163免费邮”首页(http://mail.163.com),里面就有大量的运用。

  例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。

时间: 2024-11-04 06:55:56

Div CSS absolute与relative的区别小结的相关文章

css absolute与relative的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Position属性四个值:static、fixed、absolute和relative的区别和用法

Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm   解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

Position属性四个值:static、fixed、absolute和relative的区别和用法(转自博友 Newbie_小白)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,ri

css 布局absolute与relative的区别

absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relative:当使用时,表示在文档中确实占有一定的空间,在不设置任何方位值时,会出现在应该出现的位置(空间),当设置了方位值之后,会在应该出现的位置上进行上.下.左.右的形状位移,而实际上还是占有应该占有的位置(空间)

position属性absolute与relative 的区别

每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认 依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位, 位置将由TRBL决定.

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

DIV CSS position绝对定位absolute relative教程篇

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对

CSS position的absolute和relative的解析[转]

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,