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. bootscript/javascript组件

    javascript组件   (1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件. bootstrap框架 ...

  2. TFS二次开发系列：三、TFS二次开发的第一个实例

    首先我们需要认识TFS二次开发的两大获取服务对象的类. 他们分别为TfsConfigurationServer和TfsTeamProjectCollection,他们的不同点在于可以获取不同的TFS ...

  3. C#中对string与string[]的初步操作

    开篇之作,简单的对string与string[]进行初步操作,入门篇也,不多说,直接上代码. using System; using System.Collections.Generic; using ...

  4. hdu 1300 Pearls

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1300 思路:用dp[i]表示前i种花费最低的情况,则有dp[i]=min(dp[i],dp[j+1]+(( ...

  5. thinkphp 杂项（3.2.3）

    G('start');//时间描点start php代码.... G('end');//时间描点end echo G('start','end',4).'-----------'; 时间统计echo ...

  6. HDU 5769 Substring 后缀数组

    Substring Problem Description ?? is practicing his program skill, and now he is given a string, he h ...

  7. 转载--PayPal高级工程总监：读完这100篇论文 就能成大数据高手

    http://www.csdn.net/article/2015-07-07/2825148

  8. [自动运维]oracle自动备份

    数据是应用的核心部分,程序坏了换台机器重新发布就可以,但数据一旦丢失,造成的损失将不可挽回,程序发布到生产后,数据的备份便显得尤为重要,由于不一定所有的服务均有资金完成高级的备份如RAC和DG,在我们 ...

  9. Xcode UUID查询

    打开终端,输入: defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID

  10. Android入门(一):创建Android工程

    开发Android应用过程一般分为三步: 1.创建一个Android工程: 2.在xml布局文件中定义应用所包含的控件: 3.在Java代码中实现业务逻辑. 此文就介绍第一部分,创建一个Android ...