CSS 定位之绝对与相对_html/css_WEB-ITnose
1.static,relative,absolute,fixed含义
static: 元素框正常生成。块级元素生成一个矩形框,作为文档流的
的一部分,行内元素则会常见一个或多个行框,至于其父元素中。
relative: 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占有的空间仍保留。
absolute: 元素框从文档流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素挥着是初始包含块。
元素原先 在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed: 元素框的表现类似于absolute,不过其包含块是视窗本身。
2.包含块(更像是定义了一个要定位元素的上下文,是定位的重中之重)
(1)根元素的包含块由用户代理创建,在html中,跟元素是html元素,不过有些浏览器会使用body作为根元素。
在大多数浏览器中,初始包含块是一个视窗大小的矩形。
(2)对于一个非根元素来说,如果其position值是relative或static,包含块则由最近的块级框,表单元格或行内块祖先框的内容边界构成。
(或者所包含块就是它自身,自身是其上下文)
(3)对于一个非根元素来说,如果其position值是absolute,包含块设置为最近的position值不是static的 祖先元素(不是兄弟元素) 。
3.偏移属性:top,right,bottom,left(相对于包含块的偏移)
定位元素也就是position不是static的元素。
(1)偏移属性定义元素的大小
尽管有时候元素的尺寸很重要,但是对于定位元素来说则不一定必须要。
下面这个例子中,定位元素就没有指定尺寸,但是效果可以看出它确实有尺寸。
因为这些尺寸将由这些偏移隐含确定计算出。
依据上面说的,定位元素是absolute定位,其包含块是最近的position不为static的元素,在这里就是灰块元素。
(2)内容溢出和剪裁
溢出使用overflow的属性,这里就不说了。
剪裁使用clip,这里不是本章的重点。
4.绝对定位
绿灰红
上面这个例子说明包含块与定位元素的关系。
①是absolute定位元素。top=10px;相对于页面根元素。
②是包含块,包含着③absolute定位元素。
③是absolute定位元素。top=10px;相对于②包含块。
有时候你可能想确保body元素为其所有后代建立一个包含块,而不是让用户代理选择。
声明: body{position:relative}
5.相对定位
(1)相对定位的元素占据原有空间,如下图中的一段窄空白区域。
并且相对定位元素设置其自身的包含块,然后相对于那个上下文偏移自身。
下图中,红色框就是该②原本文档布局的位置。设置了top:10px;之后,相对于本身的位置下移了10个像素。
(2)相对定位的过度受限,产生的后果。
css2.1中指出,如果遇到过度受限的相对定位,一个值会重置两一个值得相反数。因此这里博疼痛=-top
也就是top:10px;bottom:-10px;
效果就是:div元素往下移动10个像素。
6.个人认为两者有着本质的区别
top,right,bottom,left是元素相对于包含块的偏移属性。
margin-top..等属性是元素中盒模型的外边距属性。
看上去两者都能造成元素与元素的位置关系。
(还有很多内容有待学习与完善)
推荐阅读
-
html/css中相对定位relative和绝对定位absolute的用法
-
html/css中相对定位relative和绝对定位absolute的用法
-
position的相对位置和绝对位置_html/css_WEB-ITnose
-
绝对定位和浮动的问题,求大神帮忙解决_html/css_WEB-ITnose
-
div 绝对定位_html/css_WEB-ITnose
-
02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记_html/css_WEB-ITnose
-
CSS中的绝对定位与相对定位详细介绍
-
CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位_html/css_WEB-ITnose
-
absolut绝对定位的非绝对定位用法_html/css_WEB-ITnose
-
css中绝对定位的img不能被遮罩层遮住,求解决办法!!_html/css_WEB-ITnose