border: 5px solid rgba(255,0,0,1);
⼀个div的分层
image.png
⽂字是按照出现的先后顺序覆盖的
浮动元素脱离⽂档流，其实就浮起来⼀点点，⽐⽂字低
position:fixed
固定在视⼝，但是后来新出的属性（transform）可以⽆视这个，强制停留也页⾯· 使⽤场景
烦⼈的⼴告
回到顶部按钮
· 配合z-index
· 经验
⼿机上尽量不要⽤这个属性，坑很多
步⼼你搜索⼀下【移动端fixed】
position 的五个取值
新属性-position
·
static 默认值，待在⽂档流⾥
relative 相对定位，升起来，但不脱离⽂档流
absolute 绝对定位，定位基准是祖先⾥的⾮static
fixed 固定定位，定位基准是viewport（有诈）
sticky 粘滞定位，适合导航栏，在下拉时停留在顶部
· 经验
如果写了absolute，⼀般都得补个relative
如果写了absolute或fixed，⼀定要补top和left
sticky兼容性很差
po sitio n:r ela tive
· 使⽤场景
⽤于做位移（很少⽤）
⽤于给absolute元素做爸爸
· 配合z-index
z-index:auto 默认值，不创建新层叠上下⽂（为0）
z-index:0/1/2 （哪个⼤哪个在上）
z-index:-1/-2
· 经验
学会管理z-index
po sitio n:a bso lute
· 使⽤场景
脱离原来的位置，零七⼀层，⽐如对话框的关闭按钮
⿏标提⽰
· 配合z-index
· 经验
很多彩笔都以为absolute是相对于relative定位的
absolute是相对于祖先元素中最近的⼀个定位元素来定位的
某些浏览器上如果不写top/left会位置错乱
善⽤left:100%
善⽤left:50%；加负margin
· Note
white-space: nowrap；不准换⾏
transform: translateX(-50%)；居中（设置位置可⽤）
button span{ display: none; } button:hover span{ display: inline-block; }
默认不显⽰，悬浮时才显⽰
在调试⼯具右侧button的style>输⼊栏右侧的hov先择两次，可以常亮显⽰
层叠上下⽂
z-index:10和5哪个更⾼？
· ⽐喻
每⼀个层叠都是⼀个新的⼩世界（作⽤域）
这个⼩世界⾥⾯的z-index跟外界⽆关
处在同⼀个⼩世界的z-index才能⽐较
· 哪些不正交的属性以可创建它css固定定位
MDN⽂档有写
需要记忆的有z-index/flex/opacity/transform
忘了就搜【层叠上下⽂MDN】
没有单独⼀个属性做这个事
· Note
只要加上z-index就有⼀个层叠上下⽂的关系，包括0（条件有position：relative/absolute/fixed 只要有fixed就有层叠，其他需要z-index不为auto）
opacity的作⽤域包括它所在的元素以及在它之内的所有元素（例如⽂字），⽽背景⾊的半透明只有背景⾊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。