【css-关于absolute和relative的一些笔记】的更多相关文章

css-关于absolute和relative的一些笔记

根据张鑫旭老师的博客,一些笔记留作备忘 1.position:absolute 具有包裹性--包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度.float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签. 具有破坏性,会使父元素高宽塌陷. 有评论说absolute不会使宽度塌陷,实验后确实如此. absolute不利于…

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab…

css 布局absolute与relative的区别

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

CSS position: absolute、relative定位问题详解

CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠. TRBL属性(TOP.RIGHT.BOTTOM.LEFT) 当设定position:absolute  如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位  如果父级(无限)设定p…

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-…

Div CSS absolute与relative的区别小结

absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样). 2. 有设定 Top.Right.Bottom.Left 的情况,这里又分了两种情况如下: (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原…

CSS+DIV定位分析(relative,absolute,static,fixed)

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

CSS+DIV布局中absolute和relative区别

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

CSS之定位，relative/absolute/fixed的用法

其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位的相对上下左右的距离,一般写法如下: position:absolute; top:20px; left:20px; 下面我们分情况讨论: 1.父级没有定位属性的情况,用relative和abosolute配合使用,解决一般的定位问题. abosolute:绝对定位,其意义是相对其最近的一个有定位属…

CSS相对|绝对（relative/absolute）定位

1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. <div class="fz"> <div class="bg-red"> <p>无absolute</p> </…