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属性缠 ...
随机推荐
- Angular2学习之开发环境构建
一.主要资料 http://blog.csdn.net/cz_jjq/article/details/50425206 http://www.tuicool.com/articles/mi6rmuB ...
- 面向amd64的XXX与与项目的目标平台“x86”不兼容
打开IIS服务器,选择应用程序池,设置中,有一个打开32位程序,选择FALSE,如果开启,在64位下就会出错.一般关闭
- BarTender是怎么做出雪花状文字
一些小伙伴在做标签时,发现有的人做的标签上的文字颜色不是纯色的,问我是怎么做的.这种雪花状文字要设置出来其实很简单,只要用到字体颜色填充工具就可以了.下面,小编就来给大家简单介绍一下BarTender ...
- t2712:字符串移位包含问题
t2712:字符串移位包含问题 总时间限制:1000ms 内存限制:65536kB描述 给定两个字符串s1和s2,要求判定其中一个字符串 是否是另一字符串通过循环移位后的子字符串.例 ...
- JMeter基础之--元件的作用域与执行顺序
前面有介绍过jmeter的元件类别,对于新手来说,jmeter的元件是还是不少的,如果我们按照每一个元件的每一个参数的含义去学习,无疑会降低学习性能测试的热情,就算我们熟悉了所有元件以及元件上的参数了 ...
- SpringMVC 请求路径结尾存在.使用@PathVariable访问路径内容,路径参数获取不准确的问题
SpringMVC采用Get方式请求资源时,如果请求路径的结尾中带有小数点(.)时,同时使用@PathVariable访问路径内容时,请求路径中最后一个小数点及其后面的内容会被Spring截断丢弃比如 ...
- Spring JDBC实现查询
1 db.properties jdbc.user=root jdbc.password=920614 jdbc.driverClass=com.mysql.jdbc.Driver jdbc.jdbc ...
- 代码安装apk文件
Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); Uri uri = Uri.fromFile(file); in ...
- DES,AeS加解密,MD5,SHA加密
1.DES一共就有4个参数参与运作:明文.密文.密钥.向量.其中这4者的关系可以理解为: 密文=明文+密钥+向量: 明文=密文-密钥-向量: 为什么要向量这个参数呢?因为如果有一篇文章,有几个词重复, ...
- MVC图片验证码
C#类库: public class YZM { public string YZMcode = String.Empty; public byte[] load() { Bitmap bit = , ...