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. 案例演示

相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
涔溪4 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
翻滚吧键盘4 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js