css absolute和float,relative,z-index的同异
大神占楼:
简书作者:张歆琳
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的同异的更多相关文章
- CSS相对|绝对(relative/absolute)定位
1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...
- [转]relative、absolute和float
position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...
- relative、absolute和float
relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS absolute与relative不得不说的故事
写在开篇: absolute说:“relative,我这辈子都不想看见你!” 为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relativ ...
- div+Css绝对定位(absolute)和相对定位(relative)的总结
1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...
- position:absolute和float会隐式的改变display类型
position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...
- CSS学习之float解析
转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...
- absolute 和float
position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠 ...
随机推荐
- JavaScript 的循环语句语法摘要
if条件语句语法: if(condition){ statements; } 理解:圆括号里的是条件参数 ,花括号里的为执行的语句. 示例代码:if(1>2){ alert("Th ...
- 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 ...
- visual studio code
偏好设置: "editor.fontSize": 26, "editor.tabSize": 8, "editor.mouseWheelZoom&qu ...
- 经验分享:Linux 双网卡 不同网段 网络互通
环境如下: 现状:一台linux主机上有两个网卡eth0 和eth1 ,机器能访问192网的服务资源,但不能访问10网段的资源. 要求:linux能通过eth1访问10网段的资源 路由: 网卡: 操作 ...
- tomcat war部署根目录下
一个很取巧的办法,步骤如下: 1. 删除webapp下所有文件 cd ${TOMAT_HOME}/webapps && rm -rf * 2. copy待部署war到webapps目录 ...
- ORA-00907: 缺失右括号 整理解决
ORA-00907: 缺失右括号 前言 最近在开发过程中使用oracle数据库,在程序中进行查询数据时遇到了“ORA-00907: 缺失右括号”的问题,但是如果直接把sql语句直接在数据库或PL/SQ ...
- spring mvc中使用freemark的一点心得
参考文档: FreeMarker标签与使用 连接http://blog.csdn.net/nengyu/article/details/6829244 freemarker学习笔记--指令参考: ht ...
- Shiro标签
在使用Shiro标签库前,首先需要在JSP引入shiro标签: <%@ taglib prefix="shiro" uri="http://shiro.apache ...
- Outlook2013 最小化Com加载项
- oracle之synonym小结
oracle中的同义词可以认为是对表.视图.序列.存储过程.函数.程序包或者其他同义词的一个别名,也就是用一个别名来映射的作用. oracle中的同义词可以分为私有和公有两种,私有同义词(privat ...