如果你想稍微改变布局中一些盒子的位置,或者,如果您想要创建一个浮动在页面其他部分顶部的UI元素,并且/或者始终停留在浏览器窗口内的相同位置,无论页面滚动多少?定位使这种布局工作成为可能。
我们可以通过设置position属性的值来覆盖默认的布局方式(就是可以覆盖掉基本文档流行为)
- top属性
- left属性
- right属性
- bottom属性
定位分类:
静态定位
默认行为相对定位
它是占据在正常的文档流中,你可以修改它的最终位置,也可以让它与页面上的其他元素重叠。
position:relative;
代码绝对定位
代码
它不再存在于正常文档布局流中,它坐在它自己的层独立于一切。
注意:元素的位置已经改变,这是因为top,bottom,left,right以不同方式在绝对定位。他们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的方向。
这里可能有疑问包含元素是什么?
这取决于绝对定位元素的父元素的position属性。
如果所有的父元素都没有显式地定义position属性,那么所有的父元素默认情况下position属性都是static。结果,绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸,并且<html>元素也被包含在这个容器里面。简单来说,绝对定位元素会被放在<html>元素的外面,并且根据浏览器视口来定位。
总结:一个元素加了absolute,那它的父容器设置为relative;绝对定位元素可以设置宽高(类似浮动)
问题:那么两个元素重叠如何决定决定哪个覆盖哪个?
z-index
- 固定定位
固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。