css定位

1.div的分层结构  

css布局&css定位：

布局是屏幕平面上的，css定位是垂直于屏幕的。

div从侧面立体看分为五层，空间顺序如下：

 如何证明div的分层结构？

背景范围：JS Bin - Collaborative JavaScript Debugging，（范围是border的外边缘围城区域）

分层结构：JS Bin - Collaborative JavaScript Debugging，（文字>浮动>块级子元素>边框>背景）

注：alt + ↑↓，可以每次调0.1

除了float中的文字，其他文字不论出现在哪他们的顺序都是通过出现先后来进行层叠的。

2.position属性（相对定位和绝对定位）

1.static，静态定位

静态定位的元素遵循正常的文档流（即：没有定位），不会受到 top, bottom, left, right影响。

2.relative，相对定位

相对于自身在文档流中的位置进行偏移。不会脱离文档流，实际在文档流中占位不变。

使用场景：

• 多用于做absolute元素的父元素
• 配合z-index，进行层叠，负数<0<正数（z-index: auto;默认值，不创建新的层叠）

 3.absolute，绝对定位
absolute绝对定位的元素会脱离文档流。absolute相对于祖先元素中最近的一个定位元素定位。

如果没有父元素设置绝对或相对定位，则元素相对于根元素html元素定位。除了positon：static的其他元素都是定位元素。

使用场景：

• 对话框关闭按钮
• 鼠标提示
• 配合z-index（relative和absolute的z-index是同一个层叠）

小技巧：

•  white-space: nowrap; 文字内容不换行
• left: 50%; transform: translate(-50%);自动居中效果
• left: 50%; margin-left: -一半居中元素宽度;手动居中效果
• top，left，right，bottom至少写2个，否则定位时可能会有浏览器位置错乱

 我的页面：JS Bin - Collaborative JavaScript Debugging

4.fixed，绝对定位（固定定位）

元素的位置相对于浏览器窗口（视口viewport）是固定位置。窗口滚动它也不会移动。

使用场景：

• 广告
• 回到顶部按钮
• 配合z-index使用

注：不要把fixed元素放入含有transform: scale(0.9);属性的元素中，会不符合要求。

手机尽量不要使用fixed属性，移动端fixed，bug特别多。

5.sticky，粘性定位

粘性定位的元素是依赖于用户的滚动，在跨越特定阈值前为相对定位，之后为固定定位。页面滚动为超出目标区域时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的行为就像 position:fixed;会固定在目标位置。

使用情况：

• 顶部条
• 置顶标题文字/标题替换

注：sticky的兼容性特别差

我的页面：JS Bin - Collaborative JavaScript Debugging

6.小结 

3.层叠上下文（stacking context）

1.定位元素与div分层

默认层叠顺序：

position定位元素默认z-index：0；自动层叠在文字上方，但不包括position为static的元素。

层叠顺序可以通过z-index的数值进行更改。

页面源码：JS Bin - Collaborative JavaScript Debugging

小技巧：

• text-align: center; 文字水平居中
• line-height: 数值（盒子高度height）; 文字垂直居中
• justify-content: center; align-items: center; 使用flex布局居中

 2.可以创建层叠上下文的属性

层叠作用域：在每个层叠作用域内，z-index根据数值大小进行排序层叠。

  页面源码：JS Bin - Collaborative JavaScript Debugging（不同作用域出现z-index，5>10）

创建新作用域的属性：

• z-index值不为auto且position：relative/absolute;的定位元素
• z-index值不为auto的flex/grid子元素
• opacity：0.5；透明度数值小于1
• position: fixed/sticky;
• transform不为none的元素

mdn文档：层叠上下文 - CSS（层叠样式表） | MDN