21-盒子定位(CSS3)

知识目标

  1. 掌握定位的概念和常见的定位方式
  2. 掌握设置定位属性的方法

1. 定位的应用场景

2. 静态定位

当position属性的取值为static 时,可以将标签定位于静态位置。所谓静态位置就是各个标签在HTML文档流中默认的位置。

任何标签在默认状态下都会以静态定位来确定自己的位置,所以当没有定义position属性时,并不是说明该标签没有自己的位置,它会遵循默认值显示为静态位置

在静态定位状态下,我们无法通过边偏移属性(top、bottom、left或right)来改变标签的位置。

3. 相对定位

position: relative :相对定位是元素在移动位置的时候,相对于自身原来的位置来说的;
特点:

  • 相对于自己原来的位置来移动
  • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。

用的较多时一般是作为绝对定位孩子的父亲时会使用。

4. 绝对定位(常用)

position: absolute:是元素在移动位置的时候,相对于它祖先元素来说的; 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。

子绝父相:常用,一般时想将位置固定在父亲的某个位置上,此时父亲一般使用相对定位,子元素使用绝对定位。然后使用top left bottom right来控制与周边的距离。

5. 固定定位(常用)

position: fixed: 元素固定于浏览器可视区的位置。

主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。如置顶按钮,旁边的广告栏。
特点:

  • 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。
  • 固定定位不在占有原先的位置。
  • 固定定位也是脱标的,可以看做是一种特殊的绝对定位。

6. 定位模式总结

6. 定位叠放次数

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)。

  • 数据可以是正整数,负整数或0,默认是auto, 数值越大,盒子越靠上。
  • 如果值一样,则以书写顺序为准,后面的在上。
  • 数字后面不能加单位。
  • 只有定位的盒子才有z-index属性。

7. 案例演示

相关推荐
会飞的鱼先生13 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
斯~内克27 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
土豆骑士1 小时前
monorepo 实战练习
前端
土豆骑士1 小时前
monorepo最佳实践
前端
见青..1 小时前
【学习笔记】文件包含漏洞--本地远程包含、伪协议、加密编码
前端·笔记·学习·web安全·文件包含