web前端开发第一阶段——定位position/层级

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43151638/article/details/102697586

不影响盒模型

与方位属性搭配：相反加负号
方位词：

top
bottom
left
right

1、绝对定位

position:absolute;
特点:
	1)相对点:
		(1)当直系父级没有定位时,该标签的定位点是文档(body窗口/html父级)
		(2)当直系父级有定位时,该标签的定位点是父级
	2)加了定位,不能继承父级
	3)脱离文档流,父级不能撑开,所以缩小
	4)加了绝对定位,任意样式都有效果
	5)直系父级都加了定位,采取"就近原则"

2、相对定位：相对于原来的位置，left：从左往右，right：从右往左

特点：
	1）相对于自己移动
	2）还占原来的位置，没有脱离文档流
	3）加了定位，层级越高，提高标签的层级

3、固定定位

position:fixed;
含义:固定在可视区不动,
特点:定位点只有一个文档窗口

4、没有定位

(清除定位)
static默认

层级:z-index:设置层级数,必须和定位搭配才有效果

回顾