1.子元素 absolute/fixed定位后，子元素脱离文档流存在，它让出原来占的那个坑，父元素再也不能通过子元素来撑开高度了

<style>
        div{
            position:absolute;
        }
</style>

<div>
        <div style="width:100px;height:100px;background-color:red;">

        </div>

        <div style="width:100px;height:100px;background-color:green;">

        </div>

        <div style="width:100px;height:100px;background-color:blue">

        </div>
</div>

绝对定位之前:

绝对定位之后:

最外层父元素的宽高为0，因为子元素都绝对定位，脱离文档流存在了。而且绿的div向上浮动覆盖红的div，蓝的div向上浮动，覆盖绿的div，这样覆盖到最后，我们只能看到蓝色的div了

2.元素设置position:absolute或者position:fixed后，元素就脱离文档流了，position:relative则还是在文档流中。

元素脱离文档流之后，会一直像冒泡一样往上浮动，直到碰到还是文档流中的元素，那么定位后的脱离文档流的元素就呆在了文档流中元素的下面了

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            position: fixed;
        }
    </style>
</head>
<body>
    <div>
        <div style="width:100px;height:100px;background-color:red;position:static; ">

        </div>

        <div style="width:100px;height:100px;background-color:green;">

        </div>

        <div style="width:100px;height:100px;background-color:blue">

        </div>
    </div>

</body>
</html>

2.1 position:fixed不能覆盖第一个div的position:static,优先级没有行内样式高

2.2 绿色的div和蓝色的div，定位之后，会向上冒泡，直到碰到static定位的红色div后停止冒泡，绿色冒过之后，蓝色的冒泡，由于蓝色div在绿色div的后面，他会无视脱离文档流的元素，直奔红色div而去，所以看上去就像是没有绿色div样滴。

CSS使用position定位后导致元素浮动的更多相关文章

  1. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  2. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  3. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  4. css 之 position定位

    position属性一共有4个值,分别是static.absolute.relative.fixed. static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果. absolute ...

  5. ie7中position:fixed定位后导致margin:0 auto;无效

    布局网页时,需要把header固定在上方.直接使用position:fixed;现代浏览器以及ie8以上均正常显示,但是ie7中,header里面的子元素设置的水平居中并没有效果.做了各种尝试,都没有 ...

  6. [ie兼容]ie7浮动左在前，浮动右在后导致右边浮动的元素掉下来

    解决办法:左浮动和右浮动元素在结构上互换位置 http://blog.sina.com.cn/s/blog_818a1e5b0100wp5b.html

  7. css中position 定位的兼容性，以及定位的使用及层级的应用

    一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...

  8. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  9. css的position定位终极总结

    relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位

随机推荐

  1. AngularJS多模块开发

    angularJS中的多模块开发是指多个module模块开发,步骤为: 1. 确定主模块    var app=angular.module('myApp',[]); 2. 其他的子模块添加到主模块后 ...

  2. [Android] Android统计Apk , jar包方法数

    reference to : http://www.jianshu.com/p/61e8f803e0d1 Android在开发过程中,随着引用的库以及业务的增多,不可避免的会出现64K limit问题 ...

  3. 配置SVN、GIT总结

    SVN使用说明 svn地址(可以是内网,也可以是外网的):svn://192.168.3.1/xxxhttp://192.168.3.1/xxxhttps://192.168.3.1/xxx 一个sv ...

  4. 获取到Android控件的高度

    问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...

  5. Gamma校正与线性空间

    基础知识部分 为了方便理解,首先会对(Luminance)的相关概念做一个简单介绍.如果已经了解就跳到后面吧. 我们用Radiant energy(辐射能量)来描述光照的能量,单位是焦耳(J),因为光 ...

  6. HDU 2509 Be the Winner nim博弈变形

    Be the Winner Problem Description   Let's consider m apples divided into n groups. Each group contai ...

  7. NewBluePill源码学习

    NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00     初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...

  8. 如何利用 JConsole观察分析Java程序的运行，进行排错调优

    原文链接:http://jiajun.iteye.com/blog/810150 一.JConsole是什么 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能 ...

  9. UML学习（三）-----序列图

    UML的模型中可分为两种,动态模型和静态模型.用例图.类图和对象图都是UML中的静态结构模型.而在UML系统动态模型的其中一种就是交互视图,它描述了执行系统功能的各个角色之间相互传递消息的顺序关系.序 ...

  10. jquery：closest和parents的主要区别

    closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找:2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进 ...