布局和定位的区别

布局是屏幕平面上的

定位是垂直于屏幕的

完全不同的概念

一个 div 的分层

从文档流和盒模型说起

背景的范围是从哪到哪？

  • border内侧围住的区域
  • border外侧围住的区域

如何验证？border半透明

代码验证：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 点rgba 按住Alt 上下键 0.1 幅度 Chrome开发者调试 */
.demo {
    box-sizing: border-box;
    margin: 12px;
    border: 15px solid rgba(255, 0, 0, .9);
    padding: 22px;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
}

做demo验证CSS特性

demo_position_divTest

从屏幕侧面看一个div，是什么样子

内容区里的文字会遮住background；

border会遮住background

内容区里的文字会遮住border吗？

会

脱离文档流的子元素 比之前高一点（离屏幕近一些）跳出并不再影响原普通文档流

其实就是浮起来了一点点

代码验证：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 字体变大 直至覆盖到border */
.demo {
    box-sizing: border-box;
    border: 15px solid red;
    width: 300px;
    height: 300px;
    background: lightblue;
    color: darkorange;
    font-size:120px;
}

上帝视角看div三维立体结构 IE Edge 3D view

分层：内容文字 > border > background

较后的子元素里的文字会覆盖较前的

让浏览的网页带有3D效果 实现3D视图查看网页 查看3D中的网站结构

火狐（firefox）使用Tilt插件实现3D视图查看网页

firefox扩展Tilt-让浏览的网页带有3D效果

* 新版火狐本不支持

Firefox 不要的 3D 视图功能，微软将它引入 Chromium

position的五个取值

  • position:static：默认值，待在文档流里，每个块级元素占据自己的区块（block），元素与元素之间不产生重叠
  • position:relative：相对定位，升起来，但不脱离文档流（所占据的位置不变，仍在默认位置处占据空间）
  • position:absolute：绝对定位，定位基准是祖先里最近的非static元素
  • position:fixed：固定定位，定位基准是viewport（有诈）
  • position:sticky：粘滞定位，直接举例

注意，position:static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

经验

  • 如果在元素上写了position:absolute，一定在父级以上元素补一个position:relative
  • 如果写了position:absolute或position:fixed，一定得补top和left
  • position:sticky兼容性差，主要用于面试

网站实例：

Julius Bär 宝盛

position:relative

相对于默认位置（即position:static时的位置）进行偏移，即定位基点是元素的默认位置

所占据的位置不变，仍在默认位置占据空间，只是显示的位置和默认位置间有一个偏移

必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离

position:relative使用场景
  • 用于做位移（很少）对齐
  • 用于给position:absolute元素做父级定位基点
position:relative配合z-index
  • z-index:auto默认值，计算出的值是0，但不创建新的层叠上下文
  • z-index:0/1/2创建新的层叠上下文
  • z-index:-1/-2创建新的层叠上下文

z-index:auto和z-index:0是不同的

position:relative经验
  • 写z-index:9999菜
  • 学会管理z-index

position:absolute

position:absolute使用场景
  • 脱离原来的位置，另起一层（比如对话框的关闭按钮）
  • 鼠标提示信息（开发者工具设置展示hover：点击Styles :hov 勾选:hover）
position:absolute配合z-index

同之前

position:absolute经验
  • 必须有参考点
  • position:absolute并不一定是相对于position:relative定位的
  • 父元素position:relative，不影响父元素，以父元素作为参考点（定位基准是祖先里最近的非static元素）
  • 不是static就是定位元素
  • 不设left/top、设为auto时，位置处于默认，即不设绝对定位时的原始位置
  • 某些浏览器上如果不写top/left会位置错乱
  • 善用：left:100%
  • 善用：left:50%;加负margin（需计算）
  • 或者transform: translateX(-50%);
  • 完全脱离普通文档流
  • 位置无法被其他任何元素改变 但会互相覆盖
  • left:10px 是自己的 外边距 相对于参考元素的边框内壁 偏移 10px
  • 宽度收缩 必须 设置 固定宽
  • 行内元素设置绝对定位后 有 块级特性 可设宽高 但不为 块级元素
  • 适用 元素重叠 任意放置

position:fixed

定位基准是viewport（有诈）

所在的父元素如果有transform:scale(0.9);之类的属性，那就不一定了

position:fixed使用场景
  • 广告
  • 回到顶部
position:fixed配合z-index

同之前

position:fixed经验
  • 视口不包括滚动条（iframe里的也是不包括）
  • 手机上尽量不要用这个属性，坑多
  • 搜索「移动端fixed」

position:sticky

position:sticky使用场景
position:sticky配合z-index
position:sticky经验

position:sticky

推走标题

z-index怎么用

  • 只要是给元素定了位（非static），变成定位元素（position:relative | absolute | fixed），自然超越了当前父元素的内容文字之上
  • 默认z-index:0;
  • 所有定位元素以所处父元素的内容文字所在的层作为基准，默认第一层z-index:0;，越往上数值越大
  • z-index为负的话，处于父元素的background之后
  • 定位元素底是当前的层叠上下文，即默认的<html></html>

demo_position_divTest

层叠上下文

也叫堆叠上下文

z-index:10和z-index:5哪个高？

不一定，要看所处的父元素是否有（形成）自己的层叠上下文

demo_stackingContext

定位与层叠上下文

比喻

  • 每个层叠上下文就是一个新的小世界（作用域）
  • 这个作用域里的z-index和外界无关
  • 处在同一个作用域的z-index之间才能比较
  • 默认层叠上下文是根元素<html></html>
  • 相当于z-index的作用域

demo

哪些不正交的属性可以创建它

  • MDN文档
  • 需要记住的：z-index/flex/opacity/transform
  • 只要满足一个条件，就自动创建一个层叠上下文
  • 其他随时搜索查看即可

opacity:0.5;和background:rgba(0,0,0,0.5)的区别

opacity影响整个元素

负z-index与层叠上下文

也只在其属于的作用域里可比较

负z-index逃不出所属层叠上下文

优先级 样式继承、选择器权重

参考文章

CSS 布局.pdf

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简