positio:absolute与position:relative的区别

absolute 能让元素 inline-block 化：
例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。
float 可以 inline-block 化元素
float 的破坏性：使高度塌陷
absolute 的破坏性：使高度和宽度都塌陷
absolute属性的
破坏性：高宽占据空间为0的特性，
定位性：借助left/top等属性的定位
少用absolute，常见absolute布局的替代实现方案：

使用margin代替

覆盖定位一般都离不开absolute属性
opacity属性的半透明效果不仅会影响到当前元素，所有的子元素也会跟着半透明
使用opacity属性或是IE filter半透明滤镜会让子元素跟着半透明。
半透明的纯色背景，不使用opacity，替代方案：使用 CSS3 rgba
```
background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
```
现代浏览器使用CSS3 rgba实现半透明背景色，IE浏览器使用渐变滤镜实现半透明。
把绝对定位元素直接放在body标签下，才能最大限度的发挥绝对定位元素的才能。
实现两栏等高布局的方法：

display:table-cell
position:absolute

position:absolute的元素无宽度，无高度。
绝对定位属性的元素具有包裹性，等同于没有高度与宽度的inline-block元素。
inline-block化的元素有三大特性：包裹性；高宽可定义；图文混排。
浮动元素有“无高度”特性
将需要绝对定位的元素单独放在relative属性的标签下，于是，relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。

1. absolute 适合用于元素隐藏；
  absolute 可以实现等高布局；
  少用absolute，可以用 margin 代替。
  absolute 元素比较适合放在 body 内。
2. relative 的元素，设置偏移时，其原位置保留；
  absolute 定位，相对于 static 定位以外的第一个父元素进行定位；
relative：相对于它本身原来的位置进行偏移（配合 right left bottom top属性进行偏移）他偏移会空出来一些空白其余的html元素不会填充这些空白
absolute：相对于同样设置了position属性的父级元素进行偏移（除了position:static）如果没有这样的html元素就是body（配合 right left bottom top属性进行偏移）

positio:absolute与position:relative的区别相关推荐

position中的absolute与relative的区别
Position(位置)属性值需要注意的地方 position的属性有: Absolute:绝对定位,是相对于最近的且不是static定位的第一个父元素来定位,元素位置通过"right&qu ...
position：absolute与relative的区别
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有 ...
position的值，以及absolute和relative的区别
在 CSS 中,元素的 position 属性有五种取值: static:默认值,元素按照正常的流动方式排列. relative:元素的位置相对于它在正常流中的位置进行定位. absolute:元素的 ...
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
position：absolute与position：relative的区别
absolute意思为绝对的,relative意为相对的.然而其用法与我们平常所想的有所不同. 大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位,实则不是.absolute定位是相对于父 ...
position:relative与position:absolute的定位区别
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
深入理解position:relative 与 position:absolute（divb相对于diva进行绝对定位）
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
{转摘}理解 position:relative 与 position:absolute
转载:<a href="http://www.happyshow.org/article/125.html" target="_blank"> po ...

positio:absolute与position:relative的区别

positio:absolute与position:relative的区别相关推荐

最新文章

热门文章