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 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇1 小时前
CSS 渐变色
前端
snow@li2 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇2 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)2 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy3 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七3 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七3 小时前
14.Python Socket客户端开发指南
前端·python
齐尹秦3 小时前
CSS Id 和 Class 选择器学习笔记
css·笔记·学习
ElasticPDF-新国产PDF编辑器3 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf