css人员定位,CSS定位

开发者工具调小数数字，按住 Alt 键再按+或-，

平时写代码不要写高度。

盒模型中的背景：

是 border 的外沿围成的区域。

浮动是怎么脱离文档流的：

比以前的 div 稍微高一层，但是比文字还是要矮一层。

新属性-position

position：

static 默认值，待在文档流里

relative 相对定位，升起来，但不脱离文档流

absolute 绝对定位，定位基准是祖先里的非 static

fixed 固定定位，定位基准是 viewport(有诈)

sticky 粘滞定位，兼容性差，一般不用

经验：

如果你写了 absolute，一般都得补一个 relative

如果你写了 absolute 或 fixed，一定要补 top 和 left，或者 top、left、bottom、right 其中两种

sticky 兼容性很差，主要用于面试装逼

position:relative

使用场景：

用于做位移(很少用，一般菜逼前端才用)

用于给 absolute 元素做爸爸

配合 z-index

z-index:auto 默认值，不创建新的层叠上下文。默认每一个元素的 z-index 是 auto，auto 计算出来的值是 0，但是你不能写 0，auto 是 auto，0 是 0，写 auto 和写 0 是不一样的。

z-index:-1/-2/0/1/2

经验

写 z-index:9999 的都是菜逼前端

学会管理 z-index

position：absolute

使用场景

脱离原来的位置，另起一层，比如对话框的关闭按钮。注：white-space:nowrap，控制文字内容不准换行。

鼠标提示。配合 display:none 和 hover。

配合 z-index

跟 relative 一样的用法，而且 absolute 和 relative 的 z-index 是可以混用的，它们是同一套 z-index。

经验

absolute 是相对于祖先元素中最近的一个定位元素定位的。

某些浏览器上如果不写 top/left 会位置错乱。top/left/bottom/right，至少写两个。

善用 left:100%。还有其它方向的 100%。

善用 left:50%；加负 margin。调试的时候如何展示一个 hover 内容，在控制台里点 hover，再勾 hover。

position：fixed

使用场景

烦人的广告

回到顶部按钮

配合 z-index

经验

手机上尽量不要用这个属性，坑很多。手机上你只要用了 position:fixed，你就会有无穷无尽的 bug。

不信你搜索一下[移动端 fixed]

层叠上下文

比喻

每个层叠上下文就是一个新的小世界(作用域)

这个小世界里面的 z-index 跟外界无关

处在同一个小世界的 z-index 才能比较

如果你的元素定位了，那么你的元素的高度就会处于文字的上面，z-index 数值越大，处于越上面，如果 z-index 为负值，就会处于 background 的下面，数值越小处于越下面。

哪些不正交的属性可以创建层叠上下文

MDN 文档有写：

根元素(HTML)

一个 z-index 值不为"auto"的绝对定位或相对定位，最简单的就是写 z-index:0

opacity 属性值小于 1 的元素。background 只能影响背景色的不透明度，opacity 影响整体的不透明度。

transform 属性值不为"none"的元素

position:fixed

需要记忆的有 z-index/flex/opacity/transform

忘了就搜[层叠上下文 MDN]

负的 z-index 与层叠上下文：

记住负的 z-index 逃不出小世界。负的 z-index 会被父元素的 background 盖住，但是一旦父元素的 z-index 不为 auto(变成了层叠上下文)，这个负的 z-index 又会显现出来。