如果元素有属性 '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. ios开发——实用技术篇&Pist转模型详细介绍

    Pist转模型详细介绍 关于Plist转模型在iOS开发中是非常常见的,每开一一个项目或者实现一个功能都要用到它,所以今天就给大家讲讲Plist怎么转成模型数据, 前提:必须有一个Plist文件或者通 ...

  2. 更新mac自带的python

    mac lion自带的python是2.7版本的,有点儿低,要使用一些应用的时候还需要3.3以上的,这时可以用以下的方法更新mac自带的python. 先去python的官网下载最新的python,并 ...

  3. MySQL · 引擎特性 · InnoDB COUNT(*) 优化(?)

    http://mysql.taobao.org/monthly/2016/06/10/ 在5.7版本中,InnoDB实现了新的handler的records接口函数,当你需要表上的精确记录个数时,会直 ...

  4. Aggregating local features for Image Retrieval

    Josef和Andrew在2003年的ICCV上发表的论文[10]中,将文档检索的方法借鉴到了视频中的对象检测中.他们首先将图像的特征描述类比成单词,并建立了基于SIFT特征的vusual word ...

  5. 用 UIViewPropertyAnimator 编写动画

    [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件 [iOS 10 day by day] Day 2:线程竞态检测工具 Thread Sanitizer < ...

  6. Android(java)学习笔记75:匿名内部类的方式实现多线程程序

    二话不说,首先利用代码体现出来,给大家直观的感觉: package cn.itcast_11; /* 4 * 匿名内部类的格式: 5 * new 类名或者接口名() { 6 * 重写方法; 7 * } ...

  7. 协议Protocol

    1.协议:是一组声明方法的集合,不能声明成员变量,作用类似于接口.           遵守此协议的类就相当于拥有了这个协议的所有方法的声明,如果父类遵守了某个协议,子类也遵守了这个协议.       ...

  8. TortoiseGit无法勾选Load Putty Key,该选项为灰色的解决办法

    1.软件版本 Git版本:Git-1.9.0-preview20140217.exe TortoiseGit:TortoiseGit-1.8.8.0-64bit.msi     2.出现问题 使用右键 ...

  9. [未完成]plugin.xml文件

    此文章部分转自:http://fxzcollege6.iteye.com/blog/2013055 关于plugin.xml文件我还总结过一篇文章:http://www.cnblogs.com/Dre ...

  10. 关于JDK中采用单例模式的类

    JDK设计模式应用——单例模式(Singleton) <JDK源码分析>的分支,讲解设计模式在jdk中使用. 我们从三个方面讲述,一是:jdk源码中的设计模式:二是:讲解设计模式(UML图 ...