定位

定位：是将指定的元素摆放到页面的任意位置。也就是说通过定位就能任意的摆放元素。

如何设置？
——通过position属性来设置元素的定位。

种类：

    static、relative、absolute、fixed、inherit、initial、unset、sticky

前端开发中比较常用的定位有三种：固定定位，相对定位，绝对定位。

 定位三种：
	固定定位:相对于浏览器定位
	相对定位：相对于原本的位置定位（依然会占据原来的空间）
	绝对定位：相对于离它最近的已定位父级定位

固定定位position:fixed

1.它可以在四个方向分别或者同时进行偏移

2.定义时它总是以浏览器为参照物，且不占据原来的位置

3.它不会随着浏览器的滚动而移动，即会固定在所能到观察浏览器界面的固定地方

4.元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

绝对定位position:absolute

1. 它可以在四个方向分别或者同时进行偏移

2.单独定义时它的参照物是浏览器本身，且不占据原来的位置

3.当父元素和子元素同时定义时，他们的参照物是父元素，且不占据原来的位置

4.当子元素绝对定位，父元素相对定位时，他们的参照物是父元素，且还占据原来的位置

5.当子元素相对定位，父元素绝对定位时，他们的参照物是父元素，且不占据原来的位置

6.元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

相对定位position:relative
1.它可以在四个方向分别或者同时进行偏移

2.定义时它的参照物是父元素（没有时为浏览器本身）

3.偏移后元素的原来位置还是被占着，并没有空出来

4.当父元素和子元素同时定义时，他们的参照物是父元素，且占据原来的位置

5.元素的位置通过top、right、bottom、left  控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

标签：定位,位置,浏览器,参照物,元素,left
来源： https://www.cnblogs.com/zfy050323/p/15552826.html