什么是定位
将元素放到指定位置上,一旦使用定位该元素便会从文档中脱离出来,进入另一个层面。
同时使用定位必须要和偏移结合起来
偏移
偏移分为四种
1)top:距离容器顶部的距离
2)right:距离容器右边的距离
3)bottom:距离容器底部的距离
4)left:就李荣启右边的距离
四种定位
1)静态定位(static)
默认值,标准文档流的方式,流式布局,块状元素从上往下,行内元素从左往右
2)相对定位(relative)
相对于本身原有的位置,发生了偏移。没有脱离文档流,自身的位置不会被其它元素占据(没有脱离文档流)
<style>
#d1{
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: aqua;
}
#d2{
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid yellow;
position: relative;
top: 20px;
left: 20px;
}
#d3{
width: 300px;
height: 300px;
border: 1px solid black;
background-color: blueviolet;
}
</style>
<!-- 相对定位 -->
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
3)绝对定位(absolute)(完全脱离文档流)
先判断父元素或祖先元素有没有进行定位:若进行定位,则以已经定位的父元素或祖先元素为基准进行偏移;若没有进行定位,则以浏览器窗口的左上角原点为基准进行偏移。
4)固定定位(fixed)(完全脱离文档流)
将元素固定在页面中的指定位置上,不随页面的滚动而滚动
例如:百度的登录页面、支付页面等