CSS盒子定位

又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功,好了,闲聊就到这里吧,下面我分享下这周老师讲到的一些内容,以下都是自己的理解哈,仅供参考:

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值的,如果有,就是他的包含块;

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

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

原文地址:https://www.cnblogs.com/potapo-tudou/p/10540166.html