大神占楼:

简书作者:张歆琳

http://www.jianshu.com/p/a3da5e27d22b

http://www.cnblogs.com/lxblog/p/3152897.html

摘录:

float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽。

absolute(层级高)其实已经不能算是欺骗父元素了,而是出现了层级关系。

一旦给元素加上absolute或float就相当于给元素加上了display:block;,就可以给元素定宽width了。

未指定left/top/right/bottom的absolute元素,其在所处层级中的定位点就是正常文档流中该元素的定位点。

多一个属性意味着多一层维护。

CSS里有个细节值得关注:用absolute的left: 0;right: 0;top: 0;bottom: 0;来实现全屏拉伸,对于absolute元素来说,如果同时设置left和right会水平拉伸,同时设置top和bottom会垂直拉伸。那为何不设width/height为100%呢?代码都贴给你了,可以自己试试。算了告诉你答案吧,前面说了,不设top/right/top/bottom的话absolute会从正常文档流应处的位置开始定位,因此做不到全屏。除非你设置width/height为100%后,同时再设left: 0; top: 0;。

推荐的是absolute控制隐藏和显示。方法当然相当简单,如absolute+ top:-9999em,或absolute + visibility:hidden。

在父元素 中设置相对定位属性,子元素中设置绝对定位属性。绝对定位脱离文档流,需设置定位信息。

  • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative:生成相对定位的元素,相对于其(自身)正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
  • fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
  • static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • inherit:规定应该从父元素继承 position 属性的值。

这时候,我们会发现问题,两个子Div 都设置了 绝对定位,他们是相对于哪个元素发生了偏移呢?

这分两种情况:

1、如果Sub1 的父元素或者祖父元素,设置了Position属性,并且属性值为 absolute 或 relative的时候,那么子元素相对于父元素来进行定位。比如我们例子中最外层Div Parent设置了相对定位属性,因此Sub1 和 Sub2 两个Div 就根据 Div Parent 来进行定位。但是根据Parent那个定位点进行定位呢?答案是:如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位。

2、如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位。

 

css absolute和float,relative,z-index的同异的更多相关文章

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

    1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...

  2. [转]relative、absolute和float

    position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...

  3. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

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

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

  5. CSS absolute与relative不得不说的故事

    写在开篇: absolute说:“relative,我这辈子都不想看见你!” 为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relativ ...

  6. div+Css绝对定位(absolute)和相对定位(relative)的总结

    1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...

  7. position:absolute和float会隐式的改变display类型

    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...

  8. CSS学习之float解析

    转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...

  9. absolute 和float

    position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠 ...

随机推荐

  1. JavaScript 的循环语句语法摘要

     if条件语句语法: if(condition){ statements; } 理解:圆括号里的是条件参数  ,花括号里的为执行的语句. 示例代码:if(1>2){ alert("Th ...

  2. redis 3.2.6 on ubuntu 14.04

    1. official site: https://github.com/antirez/redis/releases 2. compile and setup tar zxf redis-3.2.6 ...

  3. visual studio code

    偏好设置: "editor.fontSize": 26, "editor.tabSize": 8, "editor.mouseWheelZoom&qu ...

  4. 经验分享:Linux 双网卡 不同网段 网络互通

    环境如下: 现状:一台linux主机上有两个网卡eth0 和eth1 ,机器能访问192网的服务资源,但不能访问10网段的资源. 要求:linux能通过eth1访问10网段的资源 路由: 网卡: 操作 ...

  5. tomcat war部署根目录下

    一个很取巧的办法,步骤如下: 1. 删除webapp下所有文件 cd ${TOMAT_HOME}/webapps && rm -rf * 2. copy待部署war到webapps目录 ...

  6. ORA-00907: 缺失右括号 整理解决

    ORA-00907: 缺失右括号 前言 最近在开发过程中使用oracle数据库,在程序中进行查询数据时遇到了“ORA-00907: 缺失右括号”的问题,但是如果直接把sql语句直接在数据库或PL/SQ ...

  7. spring mvc中使用freemark的一点心得

    参考文档: FreeMarker标签与使用 连接http://blog.csdn.net/nengyu/article/details/6829244 freemarker学习笔记--指令参考: ht ...

  8. Shiro标签

    在使用Shiro标签库前,首先需要在JSP引入shiro标签: <%@ taglib prefix="shiro" uri="http://shiro.apache ...

  9. Outlook2013 最小化Com加载项

  10. oracle之synonym小结

    oracle中的同义词可以认为是对表.视图.序列.存储过程.函数.程序包或者其他同义词的一个别名,也就是用一个别名来映射的作用. oracle中的同义词可以分为私有和公有两种,私有同义词(privat ...