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: ...
随机推荐
- 使用python selenium进行自动化functional test
Why Automation Testing 现在似乎大家都一致认同一个项目应该有足够多的测试来保证功能的正常运作,而且这些此处的‘测试’特指自动化测试:并且大多数人会认为如果还有哪个项目依然采用人工 ...
- android149 360 程序锁输入密码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Playing with ptrace, Part I
X86_64 的 Redhat / Centos / Scientific 下面,若要编译.运行32位程序,需要安装以下包: yum install libgcc.i686 yum install g ...
- VirtualBox命令更改虚拟硬盘空间
主要是使用VBoxManage命令来操作 第一步:打开CMD,进入到virtualbox存放虚拟机的目录中(win7 系统可以直接在文件夹空白处按住shift键右键鼠标选择[在此处打开命令窗口]),输 ...
- CentOS 安装中文输入法
转载:http://blog.sina.com.cn/s/blog_9f1c093101019h03.html centos 6.3用yum安装中文输入法 1.需要root权限,所以要用root登录 ...
- 几个常用myeclipse快捷键
Ctrl + D:直接删除光标所在行 Alt + ↑:向上移动光标所在行 Alt + ↓:向下移动光标所在行 Ctrl + Alt + ↑:直接向上复制光标所在行内容 Ctrl + Alt + ↓:直 ...
- JavaScript 正则表达式相关理解
1.使用正则的test.exec方法而且带有g属性进行连续匹配的时候, 如果每次匹配之前 lastIndex属性没有清零. <script> var str='123qweQWE125|2 ...
- Objective-C基础笔记一
这里开始了我OC旅程 花了8天的时间粗略的学习了新知识Objective-C(简称OC),虽然只是学习了其中的基础部分,但经过这一周的学习也算是入门了.对面向对象的封装.继承.多态以及其中所包含的方法 ...
- C&python文件读写效率
不同缓冲区读写文件的效率比较 环境:CentOS6.3/ext3/ 读取文件大小:100000000B BUFSIZE TIMECOST 1 real 0m38.909s user 0m5.960s ...
- [转]利用vertical-align:middle实现在整个页面居中
本文转自:http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html 如果想让一个div或一张图片相对于整个页面居中,用v ...