介绍定位
静态定位 static
将元素放入它在文档布局流中的正常位置
相对定位 relative
占据在正常的文档流中
position: relative;
top:10px;
left;20px;
relative需要配合top left等使用
绝对定位absolute
不存在于文档流
它坐在它自己的层独立于一切,意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如,弹出信息框和控制菜单;翻转面板;可以在页面上的任何地方拖放的UI功能……
会垂直居中
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
定位上下文
哪个元素是绝对定位元素的“包含元素”? 默认情况下,它是元素——定位的元素是被嵌套在中的HTML源代码,但在最终的布局,它离页面边缘的顶部和左侧30px距离,这是元素。 这更准确地称为元素的定位上下文。
我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。 这是通过在元素的其他祖先之一上设置定位来实现的——它是嵌套在其中的元素之一
介绍z-index
用过z-index 来控制哪个元素在前边
固定定位 fixed
这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。