课程：

• 1、css三种定位机制分别是什么?
• 2、css定位大全
• 3、css中如何使盒子水平居中
• 4、css怎么让盒子固定
• 5、css中定位的三种方式

css三种定位机制分别是什么?

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

css定位大全

css定位大全如下：

1、相对定位 - relative

使用相对定位的盒子，会相对它原来应该在的位置进行偏移，偏移到指定的位置；

使用相对定位的盒子仍然在标准流中，它对父盒子和兄弟盒子没有任何的影响。

2、绝对定位 - absolute

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位；

绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

3、静态定位 -

static

默认值，基本不需要关注

4、固定定位 - fixed

它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变

css中如何使盒子水平居中

盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子 。

在父子盒子嵌套下，让子盒子居中的方式：

第一种方法：position， 使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半，这是最常用的方法;

第二种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center;

第三种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px);

第四种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0；

css怎么让盒子固定

通过定位属性来实现盒子的固定。

position: fixed;

上述属性和值可以实现盒子的固定，参照物是window，不管页面怎么移动，盒子位置都不会改变。

通过top，left等属性来移动盒子的位置，top这些方位的属性值可以是具体的像素也可以是百分比。

css中定位的三种方式

第一种：固定定位

第二种：绝对定位

第三种：相对定位