positio:absolute与position:relative的区别

  • 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属性进行偏移)
时间: 2024-10-12 20:48:18

positio:absolute与position:relative的区别的相关文章

css样式中position:absolute和position:relative水平居中

首先我们要了解样式中的这两种定位: absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠. relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠. 居中: 1,对于使用了absolute

position属性absolute与relative 的区别

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

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 声

position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子

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的区别

<!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:absolute,相对定位 position:relative

<1> 当我们要使用绝对定位的时候,必须要有两个条件 1>必须给父元素加定位属性,一般建议使用 position:relative(即:给父元素设为相对定位); 2>给子元素,加绝对定位position:absolute(给子元素设置为绝对定位); 同时加方向属性(top ,left,rigth,bottom) 绝对定位是以父元素为基准点,进行定位(如果他没有父元素,或者它的父元素没有设置position:relative属性)它就会以<body>为基准点进行定位.绝对

CSS position relative absolute fixed

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的

css position: relative,absolute详解

关于CSS中 position在布局中非常重要,查了很多资料都说的很难理解,下面说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素. absolute: 对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折