如果元素有属性 '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. SQL Server压缩日志及数据库文件大小

    请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库. 一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据.第6步如果日志达到上限,则以后的数据库处理会失败,在清理 ...

  2. 小白日记11:kali渗透测试之服务扫描-banner、dmitry、nmap特征库、操作系统识别、SNMP

    服务扫描 不能单纯的以端口辨别服务.很多网络服务是漏洞频发的高危对象,对网络上的特定服务进行扫描,往往能让我们少走弯路,增加渗透成功的几率.确定开放端口后,通常会对相应端口上所运行服务的信息进行更深入 ...

  3. cocos2d-x中使用sqlite

    在单机游戏中有几十个场景道具,每一个都有各自的状态(获得.未获得.获得个数)等等,如果在游戏中平凡涉及到这些道具的实时存储,那么使用文本就会稍慢.可以使用sqlite数据库来完成. 下载地址:http ...

  4. 杂乱无章之javascript(一)

    1.in 要求第一个(左边的)操作数必须是字符串类型或是可以转化成字符串类型的其他类型,而第二(右边的)操作数必须是数组或对象.只有第一个操作数的值是第二个操作数的属性名,才会返回true,否则返回f ...

  5. velocity基本用法

    1.定义变量 #set($root="www");#set($name="index.vm");#set($tmp="$root/$name" ...

  6. IIS 7.0、IIS 7.5 和 IIS 8.0 中的 HTTP 状态代码 转

    http://support.microsoft.com/kb/943891/zh-cn 日志文件位置 默认情况下,IIS 7.0.IIS 7.5 和 IIS 8.0 将日志文件放在以下文件夹中: i ...

  7. [改善Java代码]使用Throwable获得栈信息

    AOP(Aspect Oriented Programming面向切面编程)可以很轻松的控制一个方法调用哪些类,也能够控制哪些方法允许被调用,一般来说切面编程(比如AspectJ)只能控制到方法级别, ...

  8. hdu 4604 动态规划

    思路:这题的感觉就是最长上升子序列的升级版.首先对于最长上升子序列要用n*log(n)的算法才行,这个复杂度的算法可以从hdu1025得到启发.然后就是什么情况下最优问题了.对于序列中某个数i,找出其 ...

  9. Html5中的video元素

    最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下: /// <summary> /// 播放视频 ...

  10. html5 js os build

    1.NodeJS6.6 install   https://nodejs.org/en/ c:\nodejs>npm install -g grunt-cliC:\Users\police\Ap ...