html盒子位置如何设置吗,css盒子的定位

CSS盒子定位：

什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：

1、静态位置(position：static)也就是默认值：

每一个元素在没有float值的时候，都有position值，就是static，可以直接理解它在是默认值的时候就是常规流，所有规则与常规流一样；

2、相对位置(position：relative)：

相对定位：相对于自己原来的位置进行移动。

实际代码操作：对于标签样式先声明

position:relative;

再描述移动方向与像素大小

left带正数向右移，以此类推，正数情况下方向相反，那么在这种情况下对于初学的我们，这种定位可以以带负数形式就与标签头方向相同了。

以相对定位移动盒子后盒子时不脱离标准流的，所移动的是一个“虚影”，并非整个盒子往那边移动，所以盒子移动之后，周围的盒子是不会发生变化的。

相对定位在实战中用得比较少，一般用于盒子微调。

3、固定位置(position：fixed)：

固定定位，顾名思义就是固定盒子不随网页滑动而移动

实际代码：position:fixed;

可以通过top、bottom、left、right设置像素值来固定位置；

一般用于导航栏或者网页角落的广告；

4、绝对位置(position：absolute)：

绝对定位使元素的位置与文档流无关，也就是脱离文档流，因此不占据空间，比如说有三个纵向排列的三个元素盒子，尺寸宽高都为100px，如果给中间的盒子设置了position：absolute；那么他就会脱离出来，它下面的那个盒子就会向上浮，绝对定位盒子的包含块主要看他父级或祖先级里面有没有定义了position值的，如果有，就是他的包含块；

这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

其实相对定位与绝对定位都属于常规流。

标签：定位,盒子,位置,相对,position,移动,css

来源： https://www.cnblogs.com/LJY112233445566/p/14047162.html