div的分层
- 定位元素（z-index≥0）＞内联子元素＞浮动元素＞块级子元素＞border＞background>定位元素（z-index＜0）
- 布局和定位的区别是什么？
- 布局是屏幕上的，定位是垂直于屏幕的。
- background的范围是从哪到哪？
- border的外边沿围成的区域。
- 文字和border谁在上面？
- 文字在上面。
- 同一元素层级上的文字，后出现的盖住先出现的。
- 浮动元素脱离文档流：本质是比文档流内的元素高了一些。
position属性
- postion取值
- static：默认。待在文档流内。
- relative：相对定位，但不脱离文档流，在不影响文档流页面布局的情况下调整元素位置。
- absolute：绝对定位，定位基准是祖先里的非static。
- fixed：固定定位，定位基准是viewport。
- sticky：粘滞定位，可以用于写导航。
- 定位元素：非
positon: static;的元素。 - 注意
- 如果写了absolute，一般要添上relative。
- 如果写了absolute或fixed，一般要补top和left。
- sticky兼容性很差，一般不用。
position: relative;
- 在static元素看来，relative元素实际位置没有改变，但显示的位置改变了。
- 使用场景
- 用于做位移（不推荐）。
- 用于给absolute元素做父元素。
- 配合z-index，值更大的元素在上方。
z-index: auto;：默认，不创建新层叠上下文。z-index: 0/1/2;z-index: -1/-2;
- 注意
- 不要写z-index: 9999。
- 子元素的z-index不能比层叠上下文中上一层的z-index要低。
- 学会管理z-index。
position: absolute;
- absolute的使用必须要配合一个
position: relative;的父元素。 - 使用场景
- 脱离原来的位置，另起一层，比如关闭按钮。
.close { position: absolute; top: 0; right: 0; } - 鼠标提示。
button span { position: absolute; white-space: nowrap; /* 让提示出现在父元素上方+10px的位置 */ bottom: calc(100% + 10px); /* 让元素出现在父元素上方中间 */ left: 50%; transform: translateX(-50%); display: none; } span:hover 子元素{ display: inlne-block; }
- 脱离原来的位置，另起一层，比如关闭按钮。
- 配合z-index。
- 注意
- absolute不是相对于relative父元素定位的。而是相对于父元素中最近的一个定位元素来定位的。
- 部分浏览器在不写top/left，会位置错乱（四个位置至少要写两个）。
- 善用100%。
left: 100%顶到右边，right: 100%顶到左边，top: 100%顶到最下面，bottom: 100%顶到最上面。 - 善用50%和负magin。
left: 50%; transform: translateX(-50%);
position: fixed;
- 相对于视口定位。
- 使用场景
- 广告。
- 回到顶部按钮。
- 配合z-index。
- 注意
- 如果父元素有一些特殊的属性（如transform），那fixed属性就不是相对于视口定位了。
- 手机上尽量不要用这个属性（详情搜索“移动端fixed”）。
层叠上下文
- 只要写了z-index属性，就会形成层叠上下文，产生一个单独的作用域。
- 处在同一个作用域内的z-index才能比较，在作用域内的z-index与作用域外无关。
- 未标注z-index的情况下，默认的层叠上下文顶层为
<html>。 - 其他可以创建层叠上下文的属性：z-index≠auto、flex、opacity≠1、transform
- 层叠上下文 MDN文档
负z-index
- 子元素的z-index不能比父元素的z-index要低，不然前者会无效。也因此，一个子元素不一定能通过z-index＜0的方式逃出一个盒子的范围，因为它的父元素可能也是定位元素。
拓展
white-space属性
white-space: nowrap;：文字内容不准换行。
一直显示hover
- 控制台→选中对应元素→Style→Force element state→:hover
opacity和rbga的区别
- opacity影响整个元素。
- rbga只会影响部分属性，如background-color和color。
