如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:
        1、如果祖先是块级元素,containing block 由祖先的 padding edge(除 margin, border 外的区域 的最小矩形) 形成。
        2、否则(不是inline),containing block 取决于祖先的 direction 属性。
            如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方,祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
            如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方,祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。

如果都找不到,则为 initial containing block。

补充:
        1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)
        2. absolute: 向上找最近的定位为absolute/relative的元素
        3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block

position containing block原点的更多相关文章

  1. position&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

  2. position定位及实际应用

    position: static;  静态定位 / 常规定位 / 自然定位 忽略top/right/bottom/left/z-index的影响,使元素回到自然流中 <!DOCTYPE html ...

  3. 如何用Unity创建一个的简单的HoloLens 3D程序

    注:本文提到的代码示例下载地址>How to create a Hello World 3D holographic app with Unity 之前我们有讲过一次如何在HoloLens中创建 ...

  4. Css定位总结

    CSS position   static 默认值,没有定位.元素框正常生成.块级元素生成一个矩形框,作为文档流(normal flow)的一部分,行内元素则会创建一个或多个行框,置于其父元素中.to ...

  5. Javascript写了一个2048的游戏

    去年2048很火, 本来我也没玩过, 同事说如果用JS写 只要100多行代码: PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦, 在文章结尾有具体的地址和时间): 今天试了一下, 逻辑也不复杂, ...

  6. jq图片切换特效

    首先引入js,内容如下: (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option) ...

  7. Magento添加一个下拉登陆菜单Create Magento Dropdown Login in a few minutes

    Dropdown login forms are not a feature many online stores use, but in some cases they could be quite ...

  8. NFC应用实例

    package com.example.mynfcdemon; import android.app.Activity;import android.nfc.NfcAdapter;import and ...

  9. [Hive - LanguageManual] VirtualColumns

    Virtual Columns Simple Examples Virtual Columns Hive 0.8.0 provides support for two virtual columns: ...

随机推荐

  1. mysql 5.6 binlog组提交1

    [MySQL 5.6] MySQL 5.6 group commit 性能测试及内部实现流程   尽管Mariadb以及Facebook在long long time ago就fix掉了这个臭名昭著的 ...

  2. Spark Streaming metadata checkpoint

    Checkpointing 一个流应用程序必须全天候运行,所有必须能够解决应用程序逻辑无关的故障(如系统错误,JVM崩溃等).为了使这成为可能,Spark Streaming需要checkpoint足 ...

  3. 从 Auto Layout 的布局算法谈性能

    这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...

  4. DefaultSingletonBeanRegistry extends SimpleAliasRegistry implements SingletonBeanRegistry

    // 用于内部标记的空的单例对象(不支持null)protected static final Object NULL_OBJECT = new Object(); // 缓存单例对象根据beanNa ...

  5. javacv

    (看到有很多同学都来看这篇文章,说明可能是有必要的,然后这个写的比较水,所以 如果求干货的话,请移步: http://www.cnblogs.com/letben/p/5885799.html 但是 ...

  6. [设计模式]<<设计模式之禅>>关于依赖倒置原则

    依赖倒置原则(Dependence Inversion Principle,DIP)这个名字看着有点别扭,“依赖”还“倒置”,这到底是什么意思?依赖倒置原则的原始定义是 High level modu ...

  7. Ionic条码扫描

    http://m.blog.csdn.net/article/details?id=45843819

  8. iOS设备中WiFi、蓝牙和飞行模式的开启与关闭

    转自:http://www.cnblogs.com/OtionSky/archive/2011/11/08/iOS_WiFi_Controller.html 今天写了一段有关在iPhone程序中开关W ...

  9. 【Android】ADB常用指令与logcat日志(转)

    ADB命令简介 ADB是一个功能强大的命令行工具.通过它可以直接和模拟器或真机进行交互.它是一个具有客户端和服务器端的程序. 它主要由三个部分组成: 客户端,它运行在你的开发机上,你可以通过执行adb ...

  10. Contoso 大学 - 8 – 实现继承

    原文 Contoso 大学 - 8 – 实现继承 By Tom Dykstra, Tom Dykstra is a Senior Programming Writer on Microsoft's W ...