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的更多相关文章

  1. css absolute和float，relative，z-index的同异

    大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...

  2. [转]relative、absolute和float

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

  3. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

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

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

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

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

  6. CSS相对|绝对（relative/absolute）定位

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

  7. absolute 和float

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

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

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

  9. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

随机推荐

  1. 多个target下编译的时候出错问题的解决

    在工程里如果有多个target的时候,如图 那么编译的时候一定要注意Xcode右侧勾选了正确的target,否则有可能会导致一系列让你想不到的bug. ,另外,如果工程中有framework,那么一定 ...

  2. POJ 3692 Kindergarten (二分图 最大团)

    Kindergarten Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5660   Accepted: 2756 Desc ...

  3. 使用 NuGet 管理项目库

    使用 NuGet 管理项目库 Phil Haack 本文转载自:http://msdn.microsoft.com/zh-cn/magazine/hh547106.aspx 无论多么努力,Micros ...

  4. div模拟滚动条

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs&q ...

  5. Java中的变量与变量的作用域

    关于Java中的变量及变量的作用域 关于Java中的变量及变量的作用域 0. 变量的概念 在程序运行期间,系统可以为程序分配一块内存单元,用来存储各种类型的数据.系统分配的内存单元要使用一个标记符来标 ...

  6. C#学习日志 day 4 ------ 类相关---this指针以及相关关键字

    c#中的类和java中的类没什么太大区别.但是c#有些特有的关键字以及属性使得c#具有一些特性. 首先就是this关键字,this在c++和java中都有,可以表示当前对象,以及变量所属对象等.例如 ...

  7. Spring集成Quartz定时器

    <!-- Spring集成Quartz开始 --> <bean id="startQuertz" lazy-init="false" auto ...

  8. The c programming language第一章节所有程序的实现

    //打印第一个程序hello, word #include<stdio.h> int main() { printf("hello, world\n"); ; } // ...

  9. [C++]Infinite House of Pancakes——Google Code Jam 2015 Qualification Round

    Problem It’s opening night at the opera, and your friend is the prima donna (the lead female singer) ...

  10. 四轴飞行器1.3 MPU6050(大端)和M4的FPU开启方法

    四轴飞行器1.3 MPU6050(大端)和M4的FPU开启方法  原创文章,欢迎转载,转载请注明出处      最近时间花在最多的地方就是STM32的I2C上了.之前就知道STM32的I2C并不好用, ...