CSS定位
定位能够从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置。
静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。
position: static;
相对定位
position: relative;
top: value;
bottom: value;
left: value;
right: value;
-
相对定位工作的方式——你需要考虑一个看不见的力,推动定位的盒子的一侧,移动它的相反方向。 所以例如,如果你指定
top: 30px;
一个力推动框的顶部,使它向下移动30px。 -
原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)
绝对定位
绝对定位的元素不再存在于正常文档布局流中(脱标)。它坐在它自己的层独立于一切。这是非常有用的:这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如,弹出信息框和控制菜单;翻转面板;可以在页面上的任何地方拖放的UI功能……
position: absolute;
-
绝对定位是元素在移动位置的时候,相对于它的 祖先元素来说的。如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。
-
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位的祖先元素为参考点移动位置。
-
注意元素的位置已经改变——这是因为
top
,bottom
,left
和right
以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的方向。
例如:
selector {
position: absolute;
top: 30px;
left: 30px;
}
在这种情况下,我们说的绝对定位元素应该位于距离“包含元素”的顶部30px,左边30px的位置。
子绝父相
若子级是绝对定位,则父级要用相对定位。
- 子级绝对定位,不会占有位置,可以放到父级盒子里面的任何一个地方,不会影响其他的兄弟盒子。
- 父级盒子需要加定位限制子级盒子在父级盒子内显示。
固定定位
这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于
<html>
元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。
- 固定定位的元素不再存在于正常文档布局流中(脱标)。
使固定定位的元素固定在版心右侧的位置:
selector {
position: fixed;
left: 50%; /*走浏览器宽度的一半*/
margin-left: (版心width)*50% ; /*走版心的一半*/
}
粘性定位 (兼容性差 IE不支持)
粘性定位被认为是相对定位和固定定位的混合。
selector {
position: sticky;
}
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加
top,bottom,left,right
其中一个才生效
定位叠放次序 (z - index)
“z - index”是对z轴的参考,影响定位元素位于该轴上的位置;正值将它们移动到堆栈上方,负值将它们向下移动到堆栈中。默认情况下,定位的元素都具有z-index为auto,实际上为0。
-
z - index只接受无单位索引值;你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值,这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。
-
只有定位的盒子才有z - index 属性。
使绝对定位的盒子水平居中
加了绝对定位的盒子不能通过
margin: 0 auto
水平居中,但是可以通过一下计算方法实现水平和垂直居中。
selector {
position: absolute;
/*走父级盒子的一半*/
left: 50%;
/*走自己的一半*/
margin-left: -(盒子自己宽度的一半);
}
定位特殊特性
1.行内元素添加绝对或固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或固定定位,如果不给宽度或高度,默认大小是内容的大小。
3.浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题。
4.绝对定位、固定定位会完全压住盒子(包括文字),浮动会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字和图片(浮动产生的目的最初是为了做文字环绕效果)。