前端进阶Html+css10----定位的参照对象(高频面试题)

1.relative的参照对象
1)元素按照标准流进行排布;
2)定位参照对象是元素自己原来的位置,可以通过left、right、top、bottom来进行位置调整;

2.absolute(子绝父相)
1)元素脱离标准流(脱标)
2)定位参照对象是最近一级拥有定位的祖先元素,可以通过left、right、top、bottom来进行位置调整
3)如果一直往上层元素找不到有定位的元素,那么最终的参照对象为视口

在绝大数情况下,子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是: 父元素设置position:
relative(让父元素成为定位元素,而且父元素不脱离标准流) 子元素设置position: absolute 简称为“子绝父相

2.fixed
1)元素脱离标准流(脱标)
2)定位参照对象是视口(viewport),可以通过left、right、top、bottom来进行位置调整
3)当画布滚动时,元素的位置是固定不动的

总结:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

校园跑腿小程序开发方案详解

校园跑腿小程序App的功能有哪些? 1、用户注册与登录 用户可以通过手机号、社交账号等方式进行注册和登录,以便使用跑腿服务。 2、下单与发布任务 用户可以发布各类跑腿任务,包括食品外卖、快递代收、文件送达、帮我买、帮我取、帮我送等等…

【Java转Go】快速上手学习笔记(五)之Gorm篇

目录 go get命令1、go get命令无响应问题2、Unresolved dependency错误 连接数据库连接.gomain.go 操作数据库创建表新增数据更新数据删除数据查询数据单表查询多表查询 用到的数据库表原生SQL 完整代码 go往期文章笔记: 【Java转Go】快速上手学习笔记(…

C语言:运算符优先级

一、优先级(常使用的运算符) 见表格 二、注意 总体原则:算术运算符 > 关系运算符 > 逻辑运算符 > 赋值运算符 同一级别下的运算符的运算次序由表达式的结合方向决定 运算符注释级别( )圆括号1[ ]数组下标1后置后置2后置--后置--2前置…

获取标签元素在整个页面(包含滚动条)中的相对位置的方法

1、获取网页元素的相对位置的普通方法 有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象…

【ag-grid-vue】基本使用

ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求。固定列、拖动列大小和位置、多表头、自定义排序等等各种常用又必不可少功能。关于收费的问题,绝大部分应用用免费的社区版就够了,ag-grid-community社…

MATLAB打开excel读取写入操作例程

本文使用素材含代码测试用例等 MATLAB读写excel文件历程含,内含有测试代码资源-CSDN文库 打开文件 使用uigetfile函数过滤非xlsx文件,找到需要读取的文件,首先判断文件是否存在,如果文件不存在,程序直接返回&#x…

线上问诊:业务数据采集

系列文章目录 线上问诊:业务数据采集 文章目录 系列文章目录前言一、环境准备1.Hadoop2.Zookeeper3.Kafka4.Flume5.Mysql6.Maxwell 二、业务数据采集1.数据模拟2.采集通道 总结 前言 暑假躺了两个月,也没咋写博客,准备在开学前再做个项目找…

elementui表格嵌套上传文件直传到oss服务器(表单上传)

提示:记录项目中遇到的问题,仅供参考 文章目录 前言一、vue代码二、js接口请求代码 前言 项目需求是在表格中嵌套一个上传图片的功能,并且回显选择的图片和已上传的图片,再通过点击操作列中上传按钮才开始上传,使用的…

如遭遇DDoS等攻击会对企业和个人造成严重影响,包括以下

1. 服务不可用:正常用户无法访问目标服务器,导致业务中断,影响用户体验。 2. 数据泄露:攻击者可能会在攻击过程中窃取用户数据,导致隐私泄露和财产损失。 3. 经济损失:由于服务中断,企业可能遭受…

放大电路【笔记】

直接耦合 电路之间信号的传递叫耦合,输入和输出都是通过放大电路直接连接,没经过滤波等手段的处理 先有直流的部分:直流的Ube有直流的Ib,直流的Ib有直流的Ic,直流的Ic有直流的Uce。 再有交流的部分,交流的…

C语言刷题训练DAY.12

1.统计成绩 解题思路&#xff1a; 这里我们设置两个变量记录最大值和最小值&#xff0c;再用一个sum统计分数总和即可。 解题代码&#xff1a; #include<stdio.h> int main() {int n 0;scanf("%d", &n);double arr[100] { 0 };int i 0;//最高分double …

postgresql 数据排序

postgresql 常见操作 排序总结 排序 -- 排序的时候null是最大的值(看一下) select employee_id,manager_id from employeesorder by manager_id desc;-- nulls first使null值排在第一位 select employee_id,manager_id from employeesorder by manager_id nulls first;-- null…

财务数据分析用什么软件好?财务数据分析的几个重要数据是什么?

财务的数据分析也分很多种的&#xff0c;就拿最粗略的划分来说&#xff0c;也可以分为3大领域—— 财务数据处理类工具财务数据挖掘类工具财务数据可视化工具 01 数据处理类 在财务数据处理这一块儿&#xff0c;不用说&#xff0c;当然是以excel为主力的数据处理类工具—— …

Protobuf在IDEA中的插件安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

python 基础篇 day 4 选择结构—— if 结构

文章目录 if 基础结构单 if 语句if-else 语句if-elif-else 语句嵌套的 if 语句 if 进阶用法使用比较运算符使用逻辑运算符使用 in 关键字range() 函数使用 is 关键字使用 pass 语句 三目运算符语法例子注意补充举例注意 if 基础结构 单 if 语句 if 条件: 执行条件为真时的代码…

海思Hi3861L开发三-新建自定义项目

一、简介 上一篇文章,介绍了如何下载安装SDK,并且编译和下载。但都是基于SDK原生提供的demo。那本节我们就来介绍一下,如果创建一个自己的项目。 二、新建目录结构 先看SDK提供的目录结构,如下图: 因为是基于应用的开发,所以我们只关注app这个文件夹。可以看到…

【vue2】前端实现下载后端返回的application/octet-stream文件流

1、下载csv/txt时 此时无须修改接口的响应格式 let filenameRegex /filename[^;\n]*((["]).*?\2|[^;\n]*)/; let matches filenameRegex.exec(data.headers[content-disposition]); let blob new Blob([\uFEFF data.data], {//目前只有csv格式type: text/csv;charse…

纠缠辅助的量子网络:原理、技术、发展与挑战

7月11日&#xff0c;中国科大网络空间安全学院和陆军院士工作室李忠辉博士为第一作者、薛开平教授为通讯作者的量子网络综述论文“Entanglement-Assisted Quantum Networks: Mechanics, Enabling Technologies, Challenges, and Research Directions”在通信领域知名期刊《IEEE…

Ext JS 之Microloader(微加载器)

“Microloader”是 Sencha 数据驱动的 JavaScript 和 CSS 动态加载器的名称。 清单 app.json 用于应用的设置,Sencha Cmd 在构建的时候会读取这个文件。 Sencha Cmd 转换“app.json”的内容并将生成的清单传递给 Microloader 以在运行时使用。 最后,Ext JS 本身也会查阅运…

什么是cssreset ?为什么要用到cssreset?

1&#xff0c;什么是cssreset ? 顾名思义&#xff0c;css reset&#xff0c;样式重置。即重新设置界面的样式。 CSS reset&#xff0c;又叫做 CSS 重写或者 CSS 重置&#xff0c;用于改写HTML标签的默认样式。 有些HTML标签在浏览器里有默认的样式&#xff0c;例如 p 标签有上…