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. 51nod1072(wythoff 博弈)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1072 题意: 中文题诶~ 思路: 博弈套路是有的, 找np局 ...

  2. UltraEdit 注册机使用说明

    请断开网络连接(或直接拔掉网线)后执行: 安装完成后,点击弹出界面的“注册”按钮,然后直接点击“激活”,此时UltraEdit检测到网络断开则弹出界面提示“脱机激活”,此时启动注册机,并将UltraE ...

  3. WCF创建RESTService

    这篇博客将介绍在WCF中创建REST服务相关内容.首先先看一下的项目结构: Contract,Service两个工程为类库工程,需要添加System.ServiceModel, System.Serv ...

  4. CLR VIA C# 学习笔记

    第19章 可空类型 1)使用Nullable<T>可将int32的值类型设置为Null,CLR会在Null时默认赋值为0; 如:Nullable<T> x=null; //使用 ...

  5. vaadin_demo

    简介:主要一个登陆界面,登陆后跳转到主界面: 主界面功能是点新增,新增人员数据会保存到显示列表中: 一个很简单的demo 下面是截图

  6. 国内其他的maven库

    转自:http://www.cnblogs.com/woshimrf/p/5860478.html 在oschina关来关去的烦恼下,终于受不了去寻找其他公共库了. 阿里云maven镜像 <mi ...

  7. 函数图象（N=x+y*i）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. oracle 资源学习汇总

    1:修改密码   http://blog.csdn.net/qh_java/article/details/23202259 2:Oracle数据库.实例.用户.表空间.表之间的关系

  9. [转]passport.js学习笔记

    概述 passport.js是Nodejs中的一个做登录验证的中间件,极其灵活和模块化,并且可与Express.Sails等Web框架无缝集成.Passport功能单一,即只能做登录验证,但非常强大, ...

  10. Android入门（一）：Android发展史

    Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.尚未有统一中文名称,中国大陆地区较多人使用“安卓” ...