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

news2024/11/18 17:35:29

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.coloradmin.cn/o/920019.html

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

相关文章

SpringBoot +Vue3 简单的前后端交互

前端&#xff1a;Vue3 创建项目&#xff1a; npm create vuelatest > cd <your-project-name> > npm install > npm run dev 项目结构图如下&#xff1a; 1、查看入口文件内容&#xff1a;main.js 代码如下&#xff1a; import ./assets/main.css impor…

AWS 提示证书签名过期无法自动更新

如果域名没有通过验证的话&#xff0c;证书的过去是没有办法自动更新的。 验证的方式也非常简单&#xff0c;通过下面的配置&#xff0c;把 CNAME添加到你的域名上面&#xff0c;AWS 就可会自动完成验证了。 当添加完成后&#xff0c;AWS 验证需要的时间大致在 30 分钟到 1 个…

smaps解析

我们查看应用内存都是通过adb shell dumpsys meminfo 应用名称或者pid 的方式获取 能获取的内容如下&#xff1a; 图1 数据项pss即是应用所占用的内存。那图中各项内容是怎么来的呢&#xff1f; 图2 图1种除了 EGL mtrack&#xff0c;GL mtrack都是从smaps文件种解析获得 EG…

.NET Core 实现日志打印输出在控制台应用程序中

在本文中&#xff0c;我们将探讨如何在 .NET Core 应用程序中将日志消息输出到控制台&#xff0c;从而更好地了解应用程序的运行状况。 .NET Core 实现日志打印输出在控制台应用程序中 在 .NET Core 中&#xff0c;日志输出打印是使用 Microsoft.Extensions.Logging 命名空间…

Android——基本控件下(十七)

1. 文本切换&#xff1a;TextSwitcher 1.1 知识点 &#xff08;1&#xff09;理解TextSwitcher和ViewFactory的使用。 1.2 具体内容 范例&#xff1a;切换显示当前时间 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools&…

【业务功能篇76】微服务网关路由predicates断言条件-filters路由转换地址-跨域问题-多级目录树化层级设计-mybatisPlus逻辑删除

业务开发-基础业务-分类管理 启动renren-fast如果出现如下错误 -Djps.track.ap.dependenciesfalse 添加相关配置即可 分类管理 1.后端分类接口 JDK8特性&#xff1a;https://blog.csdn.net/qq_38526573/category_11113126.html 在后端服务中我们需要查询出所有的三级分类信…

住宅IP:解锁更快速、稳定的互联网,你准备好了吗?

随着互联网的广泛普及&#xff0c;我们对网络的需求也越来越高。无论是工作、学习还是娱乐&#xff0c;我们都希望能够享受到更快速、稳定的互联网连接。而在实现这一目标的过程中&#xff0c;住宅IP正逐渐崭露头角&#xff0c;成为了一种备受关注的解决方案。那么&#xff0c;…

dig批量域名逆向查询ip

dig批量域名逆向查询ip dig nocmd noall answer -f iplist.txtiplist.txt中内容 效果图&#xff1a; dig其他选项参数&#xff1a; dig www.baidu.com A # 查询A记录&#xff0c;如果域名后面不加任何参数&#xff0c;默认查询A记录 dig www.baidu.com MX # 查询MX记…

利用TinyPng实现自动压图工具并管理

做游戏开发都会有缩减包体的问题&#xff0c;压图就是一个途径&#xff0c;用什么工具压图有很多工具和方法&#xff0c;我喜欢使用TinyPng&#xff0c;我自己久用python写了一个方便压图的工具。 ​​​​​​​​​​​​​​TinyPnghttps://tinypng.com/ 大家应该都用过&am…

Java学习笔记40

Java笔记40 创建运行时类的对象 获取运行时类的完整结构 我们可以通过反射来获取运行时类的完整结构&#xff0c;这包括&#xff1a; 实现的全部接口&#xff08;Interface&#xff09;所继承的父类&#xff08;Superclass&#xff09;全部的构造器&#xff08;Constructor&…

10 Mybatis

文章目录 1 概述1.1 什么是Mybatis?1.2 JDBC介绍(了解)1.2.1 问题分析1.2.2 技术对比 1.3 数据库连接池1.4 lombok 2 Mybatis基础操作2.1 准备2.2 删除2.2.1 日志输入2.2.2 预编译SQL2.2.2.1 介绍2.2.2.2 SQL注入2.2.2.3 参数占位符 2.3 新增2.3.1 主键返回 2.4 更新2.5 查询2…

Java 内置注解

一、内置注解 Java内置注解 也称 Java标准注解&#xff0c;是Java JDK 中自带的注解。Java 中有许多标准注解&#xff0c;以下是一些常见的标准注解&#xff1a; 1. Override&#xff1a;用于表示一个方法是重写父类中的方法。 2. Deprecated&#xff1a;用于标记已经过时的方法…

vue 使用print.js打印小票

官网&#xff1a;https://printjs.crabbly.com/ // 安装 npm install print-js --save// 引入 import printJS from print-js// 使用 printJS({printable: https://hwke.tbbug.com/images/phone/1899ed9346f64020ff4f9bbae6983952.jpg,type: image,imageStyle: width:100%;ma…

linux系统(centos、ubuntu、银河麒麟服务、uos、deepin)判断程序是否已安装,通用判断方法:使用所有应用和命令的判断

前言 项目中需要判断linux服务器中是否已经安装了某个服务 方法有很多种&#xff0c;但是很多都不通用&#xff0c; 脚本代码就不容易做成统一的 解决方案 用下面的脚本代码去进行判断 用jdk测试 脚本意思如下&#xff1a; 输入java -version命令&#xff0c;将返回的字…

react hooks 计数器

180秒倒计时 const [count, setCount] useState(0)setCount(180)useEffect(() > {clearTimeout(timer)timer setTimeout(() > {if (count > 1) {setCount(count - 1)} else {setIsSendEmail(false)}}, 1000)// eslint-disable-next-line}, [count]) import { useSta…

STM32 无法烧录

1. 一直显示芯片没连接上&#xff0c;检查连线也没问题&#xff0c;换了个ST-Link 烧录器还是连不上&#xff0c;然后又拿这个烧录器去其它板子上试下&#xff0c;就可以连接上&#xff0c;说明我连线没问题&#xff0c;烧录器也没问题&#xff0c;驱动什么的更是没问题&#x…

Kubernetes(K8S)简介

Kubernetes (K8S) 是什么 它是一个为 容器化 应用提供集群部署和管理的开源工具&#xff0c;由 Google 开发。Kubernetes 这个名字源于希腊语&#xff0c;意为“舵手”或“飞行员”。k8s 这个缩写是因为 k 和 s 之间有八个字符的关系。 Google 在 2014 年开源了 Kubernetes 项…

openCV实战-系列教程3:形态学操作(腐蚀操作/膨胀操作/开运算/闭运算/梯度计算/礼帽和黑帽)、源码解读

1、腐蚀操作 1.1 腐蚀 首先读进来并打印一张图 img cv2.imread(yzy.jpg) cv2.imshow(img, img) cv2.waitKey(0) cv2.destroyAllWindows() 这个图片出现了一些毛刺&#xff0c;看着挺难受 执行一个腐蚀操作&#xff0c;再将图片打印出来&#xff1a; kernel np.ones((3,3…

工厂方法模式介绍

韩敬海 设计模式&#xff08;Java版&#xff09; &#xff08;一&#xff09;定义 定义一个创建对象的接口&#xff0c;让子类决定实例化哪个类。工厂方法使一个类的实例化延迟到其子类。 工厂方法涉及的角色有&#xff1a; 1 .抽象工厂角色&#xff1a;工厂方法模式的核心&am…

从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题

目录 1. 可变参数模板 1.1 展开参数包 1.1.1 递归函数方式展开 1.1.2 逗号表达式展开 1.2 emplace相关接口 2. lambda表达式&#xff08;匿名函数&#xff09; 2.1 C11之前函数的缺陷 2.2 lambda表达式语法 2.3 函数对象与lambda表达式 3. 包装器 3.1 function包装器…