CSS定位

2021-10-13

div分层从上到下依次分为：

内联子元素
浮动元素脱离文档流
块级子元素块级元素若文字出现重叠的情况，是以文字出现的先后顺序进行覆盖
border
background

新属性-position 属性值：

static默认值，待在文档流里。
relative相对定位，升起来，但不脱离文档流
absolute绝对定位，定位基准是祖先里的非static 比如关闭按钮注意：使用absolute，其父元素需要加relative
备注：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
fixed固定定位，定位基准是viewport 手机上尽量不要使用这个属性
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
sticky粘滞定位

默认每个元素的z-index是auto，而auto计算出来的值为0.
white-space：nowrap； --文字内容不准换行
层叠上下文 【CSS定位】

文章图片

层叠上下文形成条件（需要记忆）：

根元素（html）
z-index不为auto的绝对/相对定位
opacity属性小于1的元素
transform的值不为none的元素
一个z-index值不为auto的flex项目，即父元素 display：flex；
固定定位元素和sticky定位元素

推荐阅读

上一篇：SpringCloud学习笔记之SpringCloud搭建父工程的过程图解

下一篇：Kafka -- 生产者客户端发送消息的大致流程