CSS定位

DIV分层

Position的五个取值

1. position：static（在文档流中的默认值）

      ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588150994724-2e7d68fc-00e0-48d2-9c53-b9defaddbe57.png#align=left&display=inline&height=255&margin=%5Bobject%20Object%5D&name=image.png&originHeight=764&originWidth=1930&size=91373&status=done&style=none&width=643.3333333333334)<br />2**.position:relative;(相对定位)**<br />           ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588151276700-2d822d79-7360-4e4a-a140-c1273f12756b.png#align=left&display=inline&height=344&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1031&originWidth=1904&size=144920&status=done&style=none&width=635)

   • 注意在第一个relative元素之后的relative元素会默认跟随第一个relative元素的起始位置，并不会因为第一个relative元素的位置变动而变动。

2. position:absolute;（绝对定位）

       ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1314543/1588151844959-24281ead-1e36-4701-9030-5249b412366b.png#align=left&display=inline&height=277&margin=%5Bobject%20Object%5D&name=image.png&originHeight=830&originWidth=1925&size=110641&status=done&style=none&width=641.6666666666666)

   • 绝对定位是依照上级元素来进行定位的，相对于哪一级元素绝对定位，就要在哪一级元素上加上position:relative;（需要注意的是当子级相当与父级绝对定位时，使得已经脱离了文档流，父级高度不会因为子级高度而改变，需要我们手动添加父级得高度来适应子级得高度)

用绝对定位来实现鼠标悬浮内容

1. postion:fixed(相当于视口进行定位)
   • 手机适配不要用fied，极易出现bug。
   • 要注意css中有其他样式会影响fixed的定位。

     层叠上下文

• 最常用的创建层叠上下文的命令z-index/flex/spacity/transfrom详细操作命令见mdn

• 同级z-index的数值大的在层叠上下文的最上边。

  

• 当父级被创建层叠上下文时，子级的层叠上下文的z-index的数值则不起作用，由父级数值决定。

  

• 当创建的层叠上下文相同级别的z-index都是相同值时，则遵循先来后到原则，谁后来谁在上面。

  

• 当z-index为负值时，则处于层叠上下文的最下方。