15. CSS定位
15. CSS定位
一个div的分层
布局和定位有啥区别？
布局是屏幕平面上的
定位是垂直于屏幕的
还得从文档流和盒模型说起，这两个概念很重要
背景的范围是从哪儿到哪儿？
A.border内边沿围成的区域
B.border外边沿围成的区域 ✅
如何验证自己的猜想？border半透明试试
.demo{
box-sizing:border-box;
margin: 12px;
border:5px solid rgba(255,0,0,1);<========
padding: 22px;
width:100px;
height:100px;
background:blue;
}从左边看一个div，是什么样子？
background在文字后面
然后呢？文字在最上层，border在第二层，背景在最后一层
如何验证自己的猜想？用代码证明即可。
https://jsbin.com/xubugun/edit?html,css,output
浮动div要比正常的div高，因为脱离了正常的文档流，文字总是在最高层。
文字按照出现顺序，后来的会盖住前面的
浮动元素脱离文档流，其实就是浮起来一点点
position的五个取值
新属性-position
position
static默认值，待在文档流里
relative相对定位，升起来，但不脱离文档流
absolute绝对定位，定位基准是祖先里的非static
fixed固定定位，定位基准是viewport(有诈)
sticky粘滞键，不好描述直接举例
经验
如果你写了absolute，一般都得补一个relative
如果你写了absolute或fixed，一定要补top和left
sticky兼容性很差，主要用于面试装逼
position:relative
使用场景
用于做位移（很少用）
https://jsbin.com/nobetah/edit?html,css,output
用于做absolute元素做爸爸
配合z-index
z-index:auto默认值，auto计算出来的值是0，但是auto和0是不一样的。不创建新层叠上下文
z-index: 0 / 1 / 2
z-index: -1 / -2
经验
写z-index: 9999的都是彩笔
学会管理z-index
https://jsbin.com/nobetah/3/edit?html,css,output
position:absolute
使用场景
脱离原来的位置，另起一层，比如对话框的关闭按钮。
absolute的元素会找爸爸元素（relative），相对爸爸元素来定位。
https://jsbin.com/nobetah/4/edit?html,css,output
鼠标提示
https://jsbin.com/nobetah/5/edit?html,css,output
配合z-index
经验
很多彩笔都以为absolute是相对于relative定位的
absolute相对于祖先元素中最近的一个定位元素（只要不是static就是定位元素）
某些浏览器如果不写top/left会位置错乱
善用left:100%
善用left:50%;加负margin（居中）
transform:translateX(-50%)
position:fixed
相对于视口来定位，也就是用户可以看到的区域，但是如果使用transform:scale(0.9),就可以打破这条规定（很蛋疼还坑）。所以不要把fixed放到有transform的元素里面，容易影响
使用场景
烦人的广告
回到顶部按钮
https://jsbin.com/pusupem/1/edit?html,css,output
配合z-index
经验
手机上尽量不要用这个属性，坑很多
不信你搜索一下“移动端fixed”
sticky粘滞定位，不好描述直接举例
https://jsbin.com/pusupem/2/edit?html,css,output
层叠上下文
如果z-index是-1，直接跑到最下面一层，比背景还要下面。z-index如果是正的，数值越大越上面
问题：z-index:10和z-index:5哪个高？
1.前者高 2. 后者高 3. 一样高 4. 看情况
要看情况，如果z-index:10在一个z-index:1的元素中，那么z-index:5高
https://jsbin.com/vacesud/1/edit?html,css,output
上面这段代码就可以创建层叠上下文
比喻
每个层叠上下文就是一个新的小世界（作用域）
这个小世界里面的z-index跟外界无关
处在同一个小世界的z-index才能比较
哪些不正交的属性可以创建它
MDN文档有写
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
需要记忆的有z-index/flex/opacity/transform
知道这些知识的面试官也不太多，不用花时间背
忘了就搜“层叠上下文MDN”
你说CSS为什么不单独创建一个属性做这个事
最后更新于
这有帮助吗？