关于CSS中的定位问题

关于定位：将一个元素放在指定的位置。

position:定位方式;

坐标:

left:*px | right:*px;

top:*px | bottom:*px;

1、静态定位：

position：static; （元素的默认定位，也叫静态定位）

2、固定定位：

position：fixed；（元素的固定定位，是以浏览器窗口为参照  （常见小广告，回到顶部等；））

设置了固定定位后该元素会脱离文档流

将某一个广告定位到屏幕正中央，只需要设置left：50%；和top：50%；然后在减去宽度和高度的一半

盒子完全居中未知大小的盒子【面试题】

方式1:

position:fixed;

top:50%;

margin-top:-盒子高度的一半;

left: 50%;

margin-left: -盒子宽度的一半;

方式二：

position:fixed;

top:0;

boyyom：0;

left: 0;

right: 0;

magin:auto;

方式三：

position:fixed;

top:calc（50% - 盒子宽度的一半）;

left: :calc（50% - 盒子宽度的一半）;

//calc有兼容性问题，calc里面的运算符号左右两边都要有空格

3、相对定位

position：relative；

相对于自己以前的位置。不脱离文档流，相对定位一般做辅助

4、绝对定位(非常重要)

position：absolute;

基于被设置非静态定位的最近上级元素进行定位，如果都没有基于浏览器的当前浏览器第一屏进行定位

应用场景：子绝父相

5、粘性定位：(兼容性不好)

position：sticky;

基于父元素的

关于定位的层次

层级z-index :z-index只针对同级别的，不会影响嵌套的层级。

嵌套的最外层在最下面的层级。

同级别的可以通过z-index来改变它们之间的层级，

同级别要使用z-index,必须要用relative,absolute,fixed定位，然后z-index才能生效。