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: ...
随机推荐
- Jquery-Ajax常用总结
1.方式一:访问.aspx 客户端: function Del(Id) { if (confirm("确认要删除?")) { $.ajax({ type: "Post&q ...
- 解决fedora64下vim不能语法着色问题
初始状态是vim打开任何文件都没有高亮迹象,接不是彩色,也没有下划线,好了,看怎么一步步解决的... 1)#vim ~/.vimrc 竟然没有这个文件,创建之#touch vim ~/.vimrc 添 ...
- mybatis0211 mybatis和spring整合
1mybatis和spring整合 1.1 mybaits和spring整合的思路 .让spring管理SqlSessionFactory .让spring管理mapper动态代理对象和dao. 使用 ...
- cocos2d-x lua与c++简单交互
cocos2d-x lua与c++简单交互 version: cocos2d-x 3.6 本文讲述lua与c++的一些简单交互: lua通过消息方式调用c++无参接口 c++调用lua带参接口 1.通 ...
- python(3)-lambda表达式
>>> fun = lambda a: a+1 >>> fun(1) 2 >>> fun = lambda a,b: a+b >>&g ...
- LeetCode 319
Bulb Switcher There are n bulbs that are initially off. You first turn on all the bulbs. Then, you t ...
- poj 2749 2-SAT问题
思路:首先将hate和friend建边求其次2-SAT问题,判断是否能有解,没解就输出-1,否则用二分枚举最大的长度,将两个barn的距离小于mid的看做是矛盾,然后建边,求2-SAT问题.找出最优解 ...
- Nginx HTTP User_agent
假设我这里有大量图像.CSS.javascript等静态文件,分别放在后端服务器 192.168.1.5 和 192.168.1.6上,那么我如何利用nginx的反向代理功能将不同的 http_us ...
- 你所不知道的z-index的用法
在开始今天的内容之前,先让我们来看下面一段代码: <style type="text/css"> #div1,#div2{ width:200px; height:20 ...
- Linux 命令 - tail: 打印文件的结尾部分
命令格式 tail [OPTION]... [FILE]... 命令参数 -c, --bytes=[-]K 显示每个文件的后 K 字节内容.-n +K 则表示从第 K 字节开始输出. -f, --fo ...