1、破坏性和包裹性

position:absolute与float:left,两者有两大共性:包裹性,破坏性。

包裹性
包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。

<div class="fz">
<div class="bg-red">
<p>无absolute</p>
</div>
<div class="abs bg-grey">
<p>absolute后</p>
</div>
</div>

float也是典型的inline-block化元素。

破坏性:

absolute比float的破坏性更强:

浮动的破坏性在于切断line box链,致使高度塌陷,但其占据的实体位置还是在的。

而absolute不仅让高度塌陷,宽度也塌陷。

注意:对于普通页面的布局,不到万不得已不要使用absolute。

absolute尽量不要身陷林立的DOM中,尤其是用来做普通的布局。

2、absolute布局的替代实现

详见《absolute布局的替代实现》

body标签是absolute元素自由的天空,如absolute没有relative属性的限制,其会一直飞到天空的边缘(浏览器窗口)。

把推荐将隐藏的绝对定位元素放在body标签内部,且最底部加载,以提高页面的呈现速度,甚至根本就不加载。

将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中,弊处相当多:

①首先增加了DOM的复杂度,不利于维护;越深的DOM元素,造成了回 流越强;

②因为父标签需要relative限制,增加了CSS代码的消耗量;

③隐藏元素头部加载,延迟了页面的呈现速度;每个下拉几乎都要重新定位,其重用性 受限。

3、absolute之元素隐藏

详见《css隐藏元素的几种方法》

4、绝对定位等高布局

5、absolute属性与IE6/IE7之间的误会

4、相对定位的最小化影响原则

追加:1、static:如果没有指定position的值,默认为static。源代码中各个标签的先后位置,就是它们所对应的对象的呈现次序

2、relative:保持对象所在文档流中的位置,跟static不同的是可以通过top,left,right,bottom改变自己的位置,这四个属性的取值是相对于文档流的前一个对象,原来呈现的页面仍然会我行我素(即通过设置top等属性,不会影响原来文档流的布局。)

3、absolute:将当前对象拖出文档流独立显示。

4、z-index:元素应用了非static的position属性后,就会有一个隐晦的层级,会居于普通元素之上。 无需额外设置z-index。

relative设置了z-index。一般情况是为改变它的子元素absolute的层级。因为absolute是“拼爹”,对relative本身无影响。

不同relative里面的absolute的层级关系是根据它的父relative层级有关,即“拼爹”,但ie6、7例外,参考以下②。

ie6问题:

①float+relative在面对absolute的时候,无论relative的层级多高都沦陷

.blank{ width: 100%; height: 600px; background-color: #000000; opacity: 0.4; filter:alpha(opacity=40); left:; top:;}
<div class="blank abs zx1"></div>
<div class="rel zx9">
<img class="l" src=" images/yyy.jpg" width="150" height="150">
</div>

正常效果是:

img层位于blank之上。但在ie6中,float的img+relative。无论relative的层级有多高,都沦陷,位于absolute之下了。

解决办法:1、position:relative改为position:absolute;2、去除浮动;3、浮动元素添加position属性(如relative,absolute等)

②正常浏览器的z-index都是“拼爹”,但是ie6、7是拼该absolute的第一个relative

<div class="blank abs zx2"></div>
<div class="rel zx1">
<div class="rel zx8">
<div class="abs zx1">
<img src="data:images/yyy.jpg" width="150" height="150">
</div>
</div>
</div>

正常浏览器img位于blank之上,因为blank的层级是zx2,而img所在div(即便它本身才zx1,但它)的爹(rel)的层级是zx8。

ie6,7浏览器不认爹,认它爹的爹rel层级为zx1,小于blank的层级。固效果为:

解决办法:只需改变img所在层的第一个(或者说最老那个爹)relative的层级。

bug:

以上代码在firefox运行,图片仍被遮挡。个人理解是如果abs图片的祖先rel设置了z-index的值,则认祖先的,如果没有设置则认父z-index的。

但是在ie6、7里面不管祖先z-index有没设置都认祖先的。

CSS相对|绝对(relative/absolute)定位的更多相关文章

  1. CSS 相对|绝对(relative/absolute)定位系列(一)

    一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...

  2. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  3. CSS 浅析position:relative/absolute定位方式

    ## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...

  4. CSS:static/relative/absolute

    static - default and this is the FLOW. ------------------------------------------------------------- ...

  5. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  6. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  7. css深入理解relative

    第一讲     relative和absolute相煎关系 同源性 .position:relative .position:absolute 限制作用 1.限制left/top/right/bott ...

  8. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

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

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  10. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

随机推荐

  1. Linux下测试PHP和MySQL是否正确安装

    测试PHP: 本打算这样配置: 1.拷贝PHP配置文件 cd /usr/local/php/etc cp php.ini /usr/local/php/lib/php.ini 2.修改apache配置 ...

  2. 【LeetCode-面试算法经典-Java实现】【139-Word Break(单词拆分)】

    [139-Word Break(单词拆分)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s and a dictionary of w ...

  3. [Django]中建立数据库视图

    Django中建立数据库视图 Django中没有建立视图的接口.假设要建立一个视图须要一些手动的改变. 这里使用的Django 版本号>1.5, 使用的数据库为mysql 第一步 建立视图,比如 ...

  4. 用PROXYCHAINS实现SSH全局代理

    NUX下可以实现SSH全局代理的软件有tsocks和proxychains两种,但是个人感觉proxychains要更加稳定简单. $ yum install proxychains # vim /e ...

  5. vue2.X 自定义 模态框 modal

    1.自定义 modal Modal.vue <!-- 模态框 --> <template> <div class="modal-mask" v-sho ...

  6. jquery:选择器 过滤器

    容易理解错误的地方: 1.假如我们想要让一个表格中第八列的所有单元格,都隐藏起来.我们可能会这么写$("table tr td:eq(8)").css("display& ...

  7. OC中动态创建可变数组的问题.有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组).两种方法

    <span style="font-size:24px;">//////第一种方法 // NSMutableArray *arr = [NSMutableArray a ...

  8. How do you stop Ansible from creating .retry files in the home directory?

    There are two options that you can add to the [defaults] section of the ansible.cfg file that will c ...

  9. EntityFramework 6.0 修改一个已经存在的对象

    public void UpdateObj(someobject obj) { db.Entry(obj).State = EntityState.Modified; db.SaveChanges() ...

  10. Verilog代码规范(持续更新)

    1.输入输出的定义,看起来整齐 2.always.if或其他语句后begin写在同一行,这样可以避免begin占用过多的行,代码密度更大 3.end后面要有注释,以标明是哪个关键词的结束,除了endc ...