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在第二层，背景在最后一层

如何验证自己的猜想？用代码证明即可。

.demo{
  box-sizing:border-box;
  margin: 12px;
  border:5px solid rgba(255,0,0,1);
  padding: 22px;
  width:100px;
  height:100px;
  background:blue;
}
.text{
  font-size:100px;
}

Screen Shot 2021-12-21 at 11.00.55 AM

https://jsbin.com/xubugun/edit?html,css,output

浮动div要比正常的div高，因为脱离了正常的文档流，文字总是在最高层。

文字按照出现顺序，后来的会盖住前面的

浮动元素脱离文档流，其实就是浮起来一点点

Screen Shot 2021-12-21 at 12.25.56 PM

Screen Shot 2021-12-21 at 12.26.14 PM

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

Screen Shot 2021-12-21 at 12.56.12 PM

position:absolute

使用场景

• 脱离原来的位置，另起一层，比如对话框的关闭按钮。

• absolute的元素会找爸爸元素（relative），相对爸爸元素来定位。

https://jsbin.com/nobetah/4/edit?html,css,output

Screen Shot 2021-12-21 at 1.02.38 PM

• 鼠标提示

https://jsbin.com/nobetah/5/edit?html,css,output

Screen Shot 2021-12-21 at 1.10.50 PM

配合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如果是正的，数值越大越上面

Screen Shot 2021-12-26 at 4.41.53 AM

问题：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

position:relative
z-index:0

上面这段代码就可以创建层叠上下文

比喻

每个层叠上下文就是一个新的小世界（作用域）

这个小世界里面的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为什么不单独创建一个属性做这个事

opacity:0.5<========会影响所有的元素
background:rgba(255,0,0,0.5)<=========只会影响背景色