web前端 定位position

1、相对定位 position: relative 

特点:  不脱标,占用自己原来位置

     显示模式特点保持不变

     设置边偏移则相对自己原来位置移动

拓展:很少单独使用相对定位,一般是与其他定位方式配合使用

   参考自身原位置

2、绝对定位 position: absolute

使用场景:子级绝对定位,父级相对定位(子绝父相) 

特点:  脱标,不占位 

    显示模式具备行内块特点 

   设置边偏移则相对最近的已经定位的祖先元素改变位置 

    如果祖先元素都未定位,则相对浏览器可视区改变位置

   绝对定位的元素参考的是有定位元素的父元素 最近的,如果父元素没有定位,则参考浏览器左上角

    绝对定位,脱离标准流,飞起来,会被占用

3、区别:相对定位参考与自身原来的位置,绝对定位 参考于浏览器左上角

4、固定定位 position: fixed 

场景:元素的位置在网页滚动时不会改变 

特点:  脱标,不占位

     显示模式具备行内块特点

     设置边偏移相对浏览器窗口改变位置   

5、堆叠元素

z-index属性指定了⼀个元素的堆叠顺序(哪个元素应该放在前⾯,或后⾯)

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前⾯。

  给定 z-index 的值为层级的值。(不给默认为0)

  层级为 0 的盒子,也比标准流和浮动高

  层级为负数的盒子,比标准流和浮动低

  层级不取小数

  层级一样,后面的盒子比前面的层级高

  浮动或者标准流的盒子,后面的盒子比前面的层级高

  abselute是不占位置的,relative是站位的。而层级的高低,是和占不占位置没有关系的。

6、粘性定位 sticky

  基于⽤户的滚动位置来定位

  在未滚动出目标区域时,类似 position:relative;

  当⻚⾯滚动超出⽬标区域时,类似 position:fixed;,它会固定在⽬标位置。

  元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位

  这个特定阈值指的是 top, right, bottom 或 left 之⼀,换⾔之,指定 top, right, bottom 或 left 四个阈值其中之⼀,才可使粘性定位⽣效。否则其⾏为与相对定位相同。

  注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。

.sticky{ position:-webkit-sticky; position:sticky; top:0; background-color:red; border:2px solid orange;}

 

 

    •  

 

    •