如果元素有属性 '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. cisco路由器配置教程

    配置cisco路由器 经过几十年的发展,从最初的只有四个节点的ARPANET发展到现今无处不在的Internet,计算机网络已经深入到了我们生活当中.随着计算机网络规模的爆炸性增长,作为连接设备的路由 ...

  2. C++_快速排序

    void quick_sort(int s[],int l,int r) { if(l<r) { int i=l,j=r,x=s[l]; while(i<j) { while( i< ...

  3. 基于Qt的开源音乐播放器(CZPlayer)

    CZPlayer CZPlayer是基于Qt开发的一款功能强大的音乐播放器,该播放器的论坛地址请点击here,目前CZPlayer已经是第四个版本了,历史版本也分别在我的github上, github ...

  4. hadoop学习记录(四)hadoop2.6 hive配置

    一.安装mysql 1安装服务器 sudo apt-get install mysql-server 2安装mysql客户端 sudo apt-get install mysql-client sud ...

  5. UVA442 Matrix Chain Multiplication 矩阵运算量计算(栈的简单应用)

    栈的练习,如此水题竟然做了两个小时... 题意:给出矩阵大小和矩阵的运算顺序,判断能否相乘并求运算量. 我的算法很简单:比如(((((DE)F)G)H)I),遇到 (就cnt累计加一,字母入栈,遇到) ...

  6. [课程相关]homework-08

    一.变量作用域和生命周期 #include <cstdlib> #include <iostream> using namespace std; void try_change ...

  7. [课程相关]homework-05

    零.准备工作 队伍成员:梁杰,夏天晗,谢祖三. 周五晚上吃完饭,我们就开始了讨论. 这次的要求是写服务器,客户端以及游戏结果动态显示.很明显是三个部分,我们也就顺其自然, 一人一个部分.我负责服务器, ...

  8. python(6)-执行shell命令

    可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen*          --废弃 popen2.*           --废弃 commands.* ...

  9. [转]Oracle hang分析

    hanganalyze是ORACLE的一款性能诊断工具,这个款工具是从oracle 8.0.6开始可用,在oracle数据库出现严重的性能问题的时候它可以帮助你定位问题所在. 1.首先说说hangan ...

  10. Composer PHP 依赖管理工具

    composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. 依赖管理 ...