position&containing block
2015-07-13 22:45
676 查看
一、包含块(Containing Block)
要讲position,首先就涉及到一个概念:包含块。1、包含块介绍
包含块简单理解就是一个定位参考块,就是大盒子里套小盒子中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。1、初始包含块(Initial containing block),即根元素的包含框。 在浏览器中是原点与 canvas 原点重合、大小与 viewport 相同的矩形。
2、position:static|relative元素包含块为最近的块级【block|list-item|table】父元素的内容框
3、positon:先找absolute最近已定位祖先元素【没有的话包含块就是初始包含块】
如果祖先元素是块级元素,则包含块是祖先元素的padding框。
如果祖先元素是内联元素,包含块取决于祖先元素的direction属性
dirrection:ltr,祖先元素的第一个盒子的上、左padding框边界是包含块的上和左,祖先元素最后一个盒子的下、右padding边界是包含块的下和右。
direction:rtl,祖先元素第一个盒子的上、右padding框边界是包含块的上右,祖先元素最后一个元素的下、左padding框边界是包含块的下、左。
4、positon:fixed元素的包含块是由viewport决定的,和根元素无关。
2、static和包含块
举例:没有设置postion,所以标签position都是默认的static。<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>包含块 by starof</title> </head> <body> <div id="div1"> <p id="p1">第一段内容</p> <p id="p2"> 这些文字是 <em id="em1">第 <strong id="strong1">二</strong>段</em> 内容 </p> </div> </body> </html>
产生盒子的元素——》包含块
body——》initial C.B.(UA-dependent)
div1——》body
p1——》div1
p2——》div1
em1——》p2
strong1——》p2
3、absolute和包含块
举例:direction:ltr,包含块的顶,左是祖先元素生成的第一个框的padding 框,右下同理。<p style="border:1px solid red; width:200px; padding:20px;"> TTT <span style="background-color:#C0C0C0; position:relative;padding:10px;"> 这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p>
<style> .float{ width: 300px; height: 150px; background: green; } .abs{ width: 150px; background-color: red; position: absolute; top:50px; } </style> </head> <body> <div class="float">我是float:left的DIV</div> <div class="abs">我是一个应用了position:absolute的DIV。</div> </body>
View Code
为什么绝对定位元素可能会覆盖浮动元素,因为浏览器渲染的时候相同堆叠上下文中,先渲染非定位元素,再渲染浮动元素,最后渲染已定位元素。
关键问题是,此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经定位的元素(即position:relative/absolute/fixed),对浮动元素不起作用的。
可将float元素的position属性值设置为relative,然后设置z-index。因为已定位元素并且z-index不是默认的auto的话会生成一个新的堆叠上下文。
如果上面说的还不是很懂,或者想更深入了解z-index原理,可参考:z-index堆叠规则
七、资源链接
8 Box model9 Visual formatting model
中文版CSS2/visuren
中文版CSS2/visudet/zh-hans
KB012: 绝对定位( Absolute positioning )
http://w3help.org/zh-cn/causes/RM1020
http://w3help.org/zh-cn/kb/008/
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:/article/5239305.html有问题欢迎与我讨论,共同进步。
相关文章推荐
- [leedcode 70] Climbing Stairs
- HDU 2476 String painter (区间DP)
- icvGetTrainingDataCallback源码详细分析
- icvCreateHaarTrainingData源码详细分析
- [LeetCode] Factorial Trailing Zeroes
- Project Euler:Problem 60 Prime pair sets
- LightOJ 1070 Algebraic Problem (推导+矩阵快速幂)
- OC 基础之----属性
- CPaintDC 、CWindowDC、 CClientDC、 CDC的区别与联系
- Swiper使用方法(向前和向后按钮在swiper-container外面)
- SonarQube安装完后出现SonarQube is under maintenance. Please check back later.
- LOJ 1070 - Algebraic Problem(矩阵快速幂啊)
- 【转载】Foxmail 小技巧 25则 (转载)
- POJ 3691 DNA repair 基于AC自己主动机DP
- 人工智能计算器AI Calculator 3.3.0 详细破解思路&教程
- 在rails中pluck和select和collect区别
- installation error: unknown failure
- copy, retain, assign , readonly , readwrite,strong,weak,nonatomic整理
- HD 1151Air Raid
- LightOJ 1070 - Algebraic Problem 矩阵快速幂