positio:absolute与position:relative的区别

Posted 2020-09-30 世界，太精彩

• absolute 能让元素 inline-block 化：
  例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。

• float 可以 inline-block 化元素

• float 的破坏性：使高度塌陷
  absolute 的破坏性：使高度和宽度都塌陷

• absolute属性的
  破坏性：高宽占据空间为0的特性，
  定位性：借助left/top等属性的定位

• 少用absolute，常见absolute布局的替代实现方案：

1. 使用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标签下，才能最大限度的发挥绝对定位元素的才能。

• 实现两栏等高布局的方法：

1. display:table-cell
2. position:absolute

• position:absolute的元素无宽度，无高度。

• 绝对定位属性的元素具有包裹性，等同于没有高度与宽度的inline-block元素。

• inline-block化的元素有三大特性：包裹性；高宽可定义；图文混排。

• 浮动元素有“无高度”特性

• 将需要绝对定位的元素单独放在relative属性的标签下，于是，relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。

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