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. javascript 核心语言笔记- 3 - 类型、值和变量

    JavaScript 中的数据类型分为两类:原始类型(primitive type)和对象类型(object type).原始类型包括数字.字符串和布尔值 JavaScript 中有两个特殊的原始值: ...

  2. FileReader：读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  3. 在shell 上执行mongo 查询

    需求 在写小工具的时候,经常遇到需要从mongodb 里面查东西来用,因为要跟其他bash 工具链结合在一起用,所以最理想的方法是能够在shell 上执行查询,然后pipe 给接下来的工具做处理. 方 ...

  4. [译]SQL Server分析服务的权限配置

    简介: 本文介绍如何配置SSAS数据库和cube相关维度的安全设置. 相对数据引擎来说,在Management Studio中配置分析服务的安全设置基本没什么区别.但是也会有一些限制,比如SSAS的权 ...

  5. flume到kafka和hbase配置

    # Flume test file# Listens via Avro RPC on port 41414 and dumps data received to the logagent.channe ...

  6. SQL中exists、not exists以及in、not in的区别和使用

    exists : 强调的是是否返回结果集,不要求知道返回什么, 比如:   select name from student where sex = 'm' and mark exists(selec ...

  7. 浅谈HTTP事务的一个过程

    一个腾讯在职的朋友问道,当我们在浏览器的地址栏输入 www.baidu.com ,然后回车,这一瞬间页面发生了什么?下面以谷歌浏览器一一解释． 一.域名解析 首先Chrome浏览器会解析www.bai ...

  8. IOC装配Bean（注解方式）

    Spring的注解装配Bean Spring2.5 引入使用注解去定义Bean @Component 描述Spring框架中Bean Spring的框架中提供了与@Component注解等效的三个注解 ...

  9. System.Windows.Application.Current.Dispatcher.BeginInvoke

    System.Windows.Application.Current.Dispatcher.BeginInvoke(new Action(() =>                        ...

  10. 关于activity的生命周期的随笔

    在activity的生命周期中,我总是容易混淆,onstart和on resume ,on pause和onstop 原来这个都是一对的. onstart 对应 onstop ,意义在于使页面显示出来 ...