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. 关于网络-get/post

    关于网络: //英译  connection:连接 append:添加 resign:放弃 // 加载网页数据 步骤 [self.webView loadRequest:request]; NSURL ...

  2. struts2学习记录

    1.对于使用Struts2框架的应用而言,尽量不要让超级链接直接接到某个视图资源,因为这种方式增加了额外的风险.推荐将所有请求都发送给Struts框架,让该框架来处理用户请求,即使只是简单的超级链接. ...

  3. static lib和dynamic lib

    lib分为 staticlib 和 dynamic lib: 静态lib将导出声明和实现都放在lib中,编译后所有代码都嵌入到宿主程序, 链接器从静态链接库LIB获取所有被引用函数,并将库同代码一起放 ...

  4. redis-3.2.5 make 报错

    make[]: Entering directory `/usr/local/src/redis-/src' CC adlist.o In file included : zmalloc.h::: e ...

  5. MongoDB replication set副本集（主从复制）（8）（转）

    转载地址:http://www.cnblogs.com/huangxincheng/p/4870557.html replicattion set 就是多台服务器维护相同的数据副本,提高服务器的可用性 ...

  6. windows 10 设置

    精简应用 邮件和日历: Get-AppxPackage *communi* | Remove-AppxPackage 新闻: Get-AppxPackage *bing* | Remove-AppxP ...

  7. [leetcode] 题型整理之排序

    75. Sort Colors Given an array with n objects colored red, white or blue, sort them so that objects ...

  8. python excel操作

    python操作excel表格(xlrd/xlwt)转载:http://www.cnblogs.com/zhoujie/p/python18.html   最近遇到一个情景,就是定期生成并发送服务器使 ...

  9. HYSBZ 2002 分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意:中文题面 思路:考虑分块,每个位置维护一个跳出该块需要的步数cnt[],和跳出 ...

  10. Delphi基本类型--枚举 子界 集合 数组

    [plain] view plain copy <strong>根据枚举定义集合 </strong> TMyColor = (mcBlue, mcRed); TMyColorS ...