我们在进行定位后经常会用到top,bottom,left,right这四个偏移属性,但是它的使用往往不得心应手,经常会出现文字出现在错误的位置或者跑到了奇怪的地方,这篇博客就来谈谈这些问题背后的原因-----
-
首先了解包含块的概念
包含快相当于是一个相对参考系,某元素的包含块一般是包裹着它的块级祖先(多数是父元素)元素或离它最近的定位的祖先元素(除static外)。初始包含块是一个视窗大小的矩形,即HTML的父级document,它是根元素HTML的包含块;而非根元素的包含块内容则详见下文:
- 如果position值是relative或static,包含块由最近的块级框、表单元格或行内祖先框的内容边界构成
- 如果position值是absolute,包含块设置为最近的position值不是static的祖先元素(可以是任何类型),过程如下:
[1]如果这个祖先是块级元素,包含块则设置为该元素的内边距边界。即是由边框界定的区域
[2]如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界
[3]如果没有祖先,元素的包含块定义为初始包含块,即document
注意:由于元素可以定位到其包含块的外面。这与浮动元素使用负外边距浮动到其父元素内容区外面很类似。所以这里包含块实际上应该是定位上下文,或者定