布局和定位的区别

布局是屏幕平面上的

定位是垂直于屏幕的

完全不同的概念

一个 div 的分层

从文档流和盒模型说起

背景的范围是从哪到哪?

如何验证?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定位所导致的元素位置,是浏览器自主决定的,所以这时topbottomleftright这四个属性无效。

经验

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

网站实例:

Julius Bär 宝盛

position:relative

相对于默认位置(即position:static时的位置)进行偏移,即定位基点是元素的默认位置

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

必须搭配topbottomleftright这四个属性一起使用,用来指定偏移的方向和距离

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

z-index:autoz-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:10z-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

相关文章