position containing block原点
如果元素有属性 '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原点的更多相关文章
- position&containing block
一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
- position定位及实际应用
position: static; 静态定位 / 常规定位 / 自然定位 忽略top/right/bottom/left/z-index的影响,使元素回到自然流中 <!DOCTYPE html ...
- 如何用Unity创建一个的简单的HoloLens 3D程序
注:本文提到的代码示例下载地址>How to create a Hello World 3D holographic app with Unity 之前我们有讲过一次如何在HoloLens中创建 ...
- Css定位总结
CSS position static 默认值,没有定位.元素框正常生成.块级元素生成一个矩形框,作为文档流(normal flow)的一部分,行内元素则会创建一个或多个行框,置于其父元素中.to ...
- Javascript写了一个2048的游戏
去年2048很火, 本来我也没玩过, 同事说如果用JS写 只要100多行代码: PS(iWeb峰会暨攻城师嘉年华2015嘉年华要来啦, 在文章结尾有具体的地址和时间): 今天试了一下, 逻辑也不复杂, ...
- jq图片切换特效
首先引入js,内容如下: (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option) ...
- 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 ...
- NFC应用实例
package com.example.mynfcdemon; import android.app.Activity;import android.nfc.NfcAdapter;import and ...
- [Hive - LanguageManual] VirtualColumns
Virtual Columns Simple Examples Virtual Columns Hive 0.8.0 provides support for two virtual columns: ...
随机推荐
- mybatis0212 mybatis逆向工程 (MyBatis Generator)
1mybatis逆向工程 (MyBatis Generator) .1什么是mybatis的逆向工程 mybatis官方为了提高开发效率,提高自动对单表生成sql,包括生成 :mapper.xml.m ...
- Android(java)学习笔记88:TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...
- 引用自定义的framework
关于静态库引用文件 如果希望你的工程能在未来能导出成静态库,那么在你编写的时候要遵循静态库引用原则,使用这种方式. 注意:这种引用方式必须在你的Products下静态库成黑色时候,才能编译通过. 使用 ...
- Ubuntu环境下配置Nginx
/etc/nginx目录文件下: drwxr-xr-x 5 root root 4096 Apr 27 12:47 ./ drwxr-xr-x 104 root root 4096 Apr 27 ...
- [Oracle EBS APIs]import Flow routing and DJ routing using BOM_RTG_PUB.PROCESS_RTG APIs
DJ routing --BOM模块的工艺路线 Flow routing -- Flow Manufacturing 模块使用的工艺路线,导入 Flow routing时先导入Line Operati ...
- Android 自学之核心服务
所谓Android的核心服务主要包括熵服务(Entropy Service).电源管理器(Power Manager).Activity管理器(Activity Manager).通话寄存器(Tele ...
- eclipse插件svn 提交时报:"svn is already locked"解决方法
在出错文件夹下,鼠标右键TortoiseSVN->Clean up. SVN错误:Attempted to lock an already-locked dir 1.出现这个问题后使用“清理”功 ...
- CSS3 变形记
CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...
- Git CMD - rm: Remove files from the working tree and from the index
命令格式 git rm [-f | --force] [-n] [-r] [--cached] [--ignore-unmatch] [--quiet] [--] <file>… 命令参 ...
- 有些方法为什么会声明称static静态的
有些方法在调用的时候,没有必要都要先实例化一下,只需要:[类名. 静态方法 ]就行了. 哪些方法的调用没有必要实例化呢?网上找了个例子: 举个例子:Car类,1.静态方法Run(),Car.Run() ...