relative、absolute和float
relative、absolute和float
position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left、top、right、bottom和z-index属性。(默认这些属性未激活,设置了也无效)
设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流。
不同:
position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index层的位置。
position:absolute会完全脱离文档流,不再z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,如果祖先元素全都没有设置,那么就相对于body元素。
float也能改变文档流,不同的是,float不会让元素浮到另一个元素上面,它仍然让元素在z-index:0层排列,只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"。float会改变正常的文档流排列,影响周围元素。
position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute和float中任何一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算显示的设置display:inline或者display:block,也仍然无效(IE6双倍边距BUG利用display:inline解决)。
position:relative却不会隐式改变display类型。
http://i.cnblogs.com/EditPosts.aspx?opt=1
relative、absolute和float的更多相关文章
- css absolute和float,relative,z-index的同异
大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...
- [转]relative、absolute和float
position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- position:absolute和float会隐式的改变display类型
position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...
- CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
- CSS相对|绝对(relative/absolute)定位
1.破坏性和包裹性 position:absolute与float:left,两者有两大共性:包裹性,破坏性. 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是 ...
- absolute 和float
position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠 ...
- CSS 相对|绝对(relative/absolute)定位系列(一)
一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- CSS 定位 relative && absolute 问题?
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
随机推荐
- 剑指offer 替换字符串中的空格
void replaceSpace(char *str,int length) { ) return; ; ; ; while(str[originlen]!='\0') { if(str[origi ...
- 3.类型、值和变量-JavaScript权威指南笔记
开始变得有意思起来了,然而第三章还是以基础知识了解的角度阐释相关的概念,并没有深入到结合代码以及要实现的功能讲用法和原理的程度. 1.概论. value:程序的运行是对值的操作. type:能够表示并 ...
- GridView合并多行列值
) { gvr.Cells[cellNum].RowSpan = rowSpanNum; ...
- 学会用这二个键,你就是电脑高手了,一个是Win键,另一个是Ctrl!
学会用这二个键,你就是电脑高手了,一个是windows键,另一个是Ctrl键. 一.windows键 1. 很多时候,需要离开座位去做别的事情,如果对自己的电脑安全很重视,不妨按住windows键后, ...
- oracle归档日志
前几天因为导入大的东西,弄得很久都没动静,一看最后才发现是归档满了.但是很多的命令还是很是很不熟悉,所以看了下,百度了下.整理下这个. 1.查看归档日志大小及使用情况 select * from v$ ...
- oracle 导入txt
没有Oraclehoume的情况下,执行下环境变量文件 sqlldr userid= DM/DM control = /home/oracle/libc/load.ctl load data infi ...
- iOS的扩展类,扩展属性
Objective-C有两个扩展机制:Associative和Category.Category用来扩展类方法,Associative用于扩展属性.Associative机制的原理是把两个对象关联起来 ...
- 经常会用到的js函数
//获取样式function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ re ...
- for循环产生的Cortex-M3汇编代码的一个奇怪现象
最近比较一下KEIL和IAR两个编译器产生的代码,基于Cortex-M3处理器的,然后发现了一几个奇怪的地方. 很简单的一个C的for循环 void fun_for_add_65535(void) { ...
- 关于CSS动画几点要注意的地方
关于CSS动画几点要注意的地方 js操作transition无效果 先看这个demo以及stackoverflow的问题 http://jsfiddle.net/ThinkingStiff/QNnnQ ...