当前位置：首页 > news >正文

css中相对定位的应用场景

news 来源：原创 2025/6/24 21:44:39

元素位置微调
- 文本与图标组合微调：在网页设计中，经常会有文本和图标的组合，比如一个带有搜索图标的搜索框。可以使用相对定位来微调图标在搜索框内的位置。例如，有以下HTML结构：
```
<input type="text" class="search - box">
<i class="search - icon"></i>
```
对应的CSS代码可以是：
```
  .search - box {width: 200px;height: 30px;border: 1px solid #ccc;}.search - icon {position: relative;left: -30px;top: 5px;width: 20px;height: 20px;background - image: url('search - icon.png');background - size: cover;}
```
- 在这里，.search - icon元素使用相对定位向左（left: -30px）和向上（top: 5px）微调了位置，使其在搜索框内处于合适的位置，并且不会影响搜索框在文档流中的位置。
- 表单元素对齐：在表单中，有时候需要对标签和输入框进行精细的对齐。相对定位可以用于在不破坏表单整体布局的情况下，微调标签和输入框的相对位置。例如，有一个简单的登录表单：
```
<form><label for="username">用户名：</label><input type="text" id="username"><label for="password">密码：</label><input type="password" id="password">
</form>
```
CSS代码如下：
```
label {position: relative;left: 10px;
}
input {width: 150px;margin - left: 10px;
}
```
- 通过给标签设置相对定位和left属性，使标签相对于其原始位置向右移动了一点，实现了更好的视觉对齐效果。
创建元素的层叠效果
- 弹出提示框与内容层叠：当需要在页面元素上显示一个弹出式的提示框或者工具提示（tooltip）时，相对定位就非常有用。例如，有一个包含产品名称的<div>元素，当鼠标悬停在上面时，显示产品的详细信息。
```
<div class="product - name">产品A</div>
<div class="product - details" style="display:none;">这是产品A的详细信息，包括功能、规格等。
</div>
```
CSS和JavaScript代码如下：
```
   	.product - name {position: relative;cursor: pointer;}.product - details {position: absolute;top: 20px;left: 0;background - color: white;border: 1px solid #ccc;padding: 10px;width: 200px;}.product - name:hover.product - details {display: block;}
```
- 在这里，.product - name元素设置为相对定位，为绝对定位的.product - details元素提供了定位的参考点。当鼠标悬停在产品名称上时，详细信息框会显示在产品名称下方，产生层叠效果。
- 图像与说明文字层叠：在图片展示页面，可能需要在图片上显示说明文字。可以将图片设置为相对定位，然后将说明文字设置为绝对定位，让文字显示在图片之上。例如：
```
<div class="image - container"><img src="image.jpg" alt="示例图片"><p class="image - caption">这是一张美丽的风景图片。</p>
</div>
```
CSS代码如下：
```
   .image - container {position: relative;}.image - caption {position: absolute;bottom: 10px;left: 10px;color: white;background - color: rgba(0, 0, 0, 0.5);padding: 5px;}
```
- 因为.image - container是相对定位，所以绝对定位的.image - caption可以根据它来确定自己在图片上的位置，从而实现文字在图片上的层叠效果。
在响应式设计中的应用
- 根据屏幕尺寸微调布局：在响应式网页设计中，相对定位可以用于根据屏幕尺寸微调元素的位置。例如，在一个两列布局的网页中，当屏幕尺寸变小，可能需要将侧边栏中的一个小部件稍微移动位置，以适应屏幕空间。假设以下HTML结构：
```
<div class="main - content"><p>主要内容区域。</p>
</div>
<div class="sidebar"><div class="widget"><h3>小部件标题</h3><p>小部件内容。</p></div>
</div>
```
CSS代码如下：
```
@media (max - width: 768px) {.sidebar.widget {position: relative;left: -10px;}
}
```
- 在这个例子中，当屏幕宽度小于等于768px时，.sidebar中的.widget元素会相对于其原始位置向左移动10px，以更好地适应小屏幕的布局。这种微调可以避免在不同屏幕尺寸下元素出现重叠或者布局混乱的情况。

css中相对定位的应用场景

元素位置微调文本与图标组合微调：在网页设计中，经常会有文本和图标的组合，比如一个带有搜索图标的搜索框。可以使用相对定位来微调图标在搜索框内的位置。例如，有以下HTML结构： <input type"text" class…...

编程日记 2025/6/24 21:44:39

人工智能技术的深度解析与推广【人工智能的应用场景】

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默， 忍不住分享一下给大家。点击跳转到网站学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……） 2、学会Oracle数据库入门到入土用法(创作中……） 3、手把…...

编程日记 2025/6/24 9:53:33

Quad Remesher使用教程

为什么要拓扑？ 我们知道，模型在三维软件中的表现，是由一系列的面通过不同角度组合而成的。3D模型制作层面上的拓扑，按我的理解来说，就是一个模型的面的结构分布——布线。想表现和制作一个三维模型，有无限…...

编程日记 2025/6/22 23:03:22

【经验分享】容器云运维的知识点

最近忙于备考没关注，有次点进某小黄鱼发现首页出现了我的笔记还被人收费了虽然我也卖了一些资源，但我以交流、交换为主，笔记都是免费给别人看的由于当时刚刚接触写的并不成熟，为了避免更多人花没必要的钱，所以决定公…...

编程日记 2025/6/24 20:46:11

NDRCContextUnmarshall断点函数分析之I_RpcBindingCopy函数的作用

NDRCContextUnmarshall断点函数分析之I_RpcBindingCopy函数的作用第一部分： void RPC_ENTRY NDRCContextUnmarshall ( // process returned context OUT NDR_CCONTEXT PAPI *phCContext,// stub context to update IN RPC_BINDING_HANDLE hRPC, …...

编程日记 2025/6/24 20:12:11

代码随想录算法训练营第三十二天|动态规划理论基础|LC509.肥波那些数|LC70.爬楼梯|LC746.使用最小花费爬楼梯

动态规划理论基础解释：动态规划，英文：Dynamic Programming，简称DP；如果某一问题有很多重叠子问题，使用动态规划是最有效的。动态规划五部曲： 1、确定dp数组（dp table）…...

编程日记 2025/6/24 20:36:02

[每周一更]-(第127期)：Go新项目-Gin中使用超时中间件实战（11）

在项目不断迭代过程中，发现基础架构中，没有进行超时控制，有些接口由于网络延迟以及远程调用等情况存在请求时间过长的问题，消耗了资源，也降低了用户体验，这一讲我们聊下超时控制中间件，来完善我…...

编程日记 2025/6/24 15:32:14

【HAL库】STM32CubeMX开发----STM32F407----Time定时器中断实验

STM32CubeMX 下载和安装详细教程【HAL库】STM32CubeMX开发----STM32F407----目录前言本次实验以 STM32F407VET6 芯片为MCU，使用 25MHz 外部时钟源。实现定时器TIM3中断，每1s进一次中断。定时器计算公式如下： arr 是自动装载值&#x…...

编程日记 2025/6/24 20:59:49

使用idea创建一个JAVA WEB项目

文章目录 1. javaweb项目简介2. 创建2.1 idea新建项目2.2 选择，命名2.3 打开2.4 选择tomcat运行2.5 结果 3. 总结 1. javaweb项目简介 JavaWeb项目是一种基于Java技术的Web应用程序，主要用于开发动态网页和Web服务。这种项目能够构建在Java技术栈之上&a…...

编程日记 2025/6/21 10:28:53

PDF 文件如何转为 CAD 图纸？PDF2CAD 使用教程

在工程设计和建筑行业中，PDF 文件常常被用来分享和存档图纸。然而，当需要对这些图纸进行编辑或进一步开发时，静态的 PDF 格式就显得力不从心了。这时候，将 PDF 文件转换为可编辑的 CAD（计算机辅助设计）格式…...

编程日记 2025/6/24 16:34:19

Spring Boot 集成 MyBatis 全面讲解

Spring Boot 集成 MyBatis 全面讲解 MyBatis 是一款优秀的持久层框架，与 Spring Boot 集成后可以大大简化开发流程。本文将全面讲解如何在 Spring Boot 中集成 MyBatis，包括环境配置、基础操作、高级功能和最佳实践。一、MyBatis 简介 1. SqlSession …...

编程日记 2025/6/24 20:23:39

SpringBoot | SpringBoot原理分析

SpringBoot原理分析（一）.jpg SpringBoot原理分析（二）.jpg 核心要点： 1、SpringBootApplication 2、SpringBootConfiguration 3、ComponentScan 4、EnableAutoConfiguration 5、AutoConfigurationPackages 6、import(Au…...

编程日记 2025/6/2 22:07:56

解决“VMware虚拟机报Intel VT-x”错误

今天，在windows系统上，打开VMware WorkStation v15软件里的虚拟机，弹出"Intel VT-x处于禁用状态"错误，如图(1)所示： 图(1) 虚拟机报"Intel VT-x"错误问题原因：当前电脑的BIOS没有开启…...

编程日记 2025/6/24 21:12:48

LeetCode200.岛屿数量

题目给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。此外，你可以假设…...

编程日记 2025/6/24 21:17:35

python学opencv|读取图像（七）抓取像素数据顺利修改图像大小

【1】引言前序我们已经学习图像的基本读取操作，文章链接为： python学opencv|读取图像-CSDN博客也掌握了彩色图像的保存： python学opencv|读取图像（二）保存彩色图像_python opencv 读取图像转为彩色-CSDN博客以…...

编程日记 2025/6/24 20:44:40

Qt Pro 常用配置

Part1: Summary Qt 开发中 Pro 文件的内容很多，需要不断的去学习和使用，现系统性的整理一下。以备录； 1.创建pro文件 1.1 步骤： Qt Creator--->New Project--->应用程序--->Qt Widgets Application--->名称为&…...

编程日记 2025/6/24 21:14:40

源码分析之Openlayers中默认Controls控件渲染原理

概述 Openlayers 中默认的三类控件是Zoom、Rotate和Attribution 源码分析 defaults方法 Openlayers 默认控件的集成封装在defaults方法中，该方法会返回一个Collection的实例，Collection是一个基于数组封装了一些方法，主要涉及到数组项的添…...

编程日记 2025/6/20 5:14:34

银河麒麟桌面操作系统添加WPS字体

【使用场景】银河麒麟桌面操作系统支持添加WPS字体。在银河麒麟桌面操作系统中使用WPS软件编辑文档时存在需要添加WPS字体的情况，例如字体缺失或者需要特殊字体时，需要添加WPS字体。【操作方法】步骤一：在互联网上搜索并下载.ttf格式的字体文件。步骤二：下载完成后，在…...

编程日记 2025/6/24 20:08:57

利用Python实现多元回归预测汽车价格

引言： AI技术的热门使得大家对机器学习有了更多的关注，作为与AI技术息息相关的一门课程，从头了解基础的机器学习算法就显得十分有必要，如：梯度下降，线性回归等。正文：本文将讲解线性回归中多元回回归的案例机器学习大致可以分为监督学习，非监督学习、半监督学习还…...

编程日记 2025/6/24 19:24:18

16、PyTorch中进行卷积残差模块算子融合

文章目录 1. 1x1卷积核-> 3x3卷积核2. 输入x --> 3x3卷积核，无变化3. 代码 1. 1x1卷积核-> 3x3卷积核假设我们有一个1x1的卷积核，需要通过填充变为一个3x3的卷积核,实现的是像素之间无关联 [ 4 ] → [ 0 0 0 0 4 0 0 0 0 ] \begin{equation}…...

编程日记 2025/6/22 5:45:52

CMake简单使用（二）

目录五、scope 作用域5.1 作用域的类型5.1.1 全局作用域5.1.2 目录作用域5.1.3 函数作用域六、宏6.1 基本语法6.2 演示代码七、CMake构建项目7.1 全局变量7.2 写入源码路径7.3 调用子目录cmake脚本7.4 CMakeLists 嵌套(最常用) 八、CMake 与库8.1 CMake生成动静态库8.1.1 动…...

编程日记 2025/6/24 21:37:02

React和Vue中暴露子组件的属性和方法给父组件用，并且控制子组件暴露的颗粒度的做法

React 在 React 中，forwardRef 是一种高级技术，它允许你将 ref 从父组件传递到子组件，从而直接访问子组件的 DOM 节点或公开的方法。这对于需要操作子组件内部状态或 DOM 的场景非常有用。为了使子组件能够暴露其属性和方法给父组件&#xf…...

编程日记 2025/6/21 15:39:05

MATLAB 识别色块和数量

文章目录前言步骤 1: 读取图像步骤 2: 转换为 HSV 颜色空间步骤 3: 定义颜色范围步骤 4: 创建颜色掩码步骤 5: 应用形态学操作（可选）步骤 6: 标记和显示结果完整代码步骤七返回色块坐标总结前言提示：这里可以添加本文要记录的大概内容&…...

编程日记 2025/6/24 21:14:39

.NET 9 已发布，您可以这样升级或更新

.NET 9 已经发布，您可能正在考虑更新您的 ASP.NET Core 应用程序。我们将介绍更新应用程序所需的内容。从更新 Visual Studio 和下载 .NET SDK 到找出可能破坏应用程序的任何重大更改。下载 .NET 9 SDK 这些是下载 .NET 9 SDK 所需的步骤。更新 Visual Studi…...

编程日记 2025/6/24 20:56:24

VMware ubuntu16.04怎么设置静态IP联网

1.将VMware桥接到当前电脑使用的网络上面； 2.点击网络符号，编辑连接； 3.双击有线连接1； 4.选择IPv4设置，将地址，子网掩码，网关，DNS服务器设置好，保存； 5.在终…...

编程日记 2025/5/21 22:00:57

#渗透测试#漏洞挖掘#红蓝攻防#js分析（上）

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/6/24 20:23:39

.NET 6.0 中接入 Log4net 和 NLog

一、接入Log4net 1.按日期和大小混合分割日志 nuget包安装 log4net Microsoft.Extensions.Logging.Log4Net.AspNetCore 配置文件配置文件内容为 <?xml version"1.0" encoding"utf-8"?> <log4net> <!-- Define some output appe…...

编程日记 2025/6/24 20:56:21

linux从frame buffer中将qt界面拷贝出来放到u盘的操作方法

使用的是gsnap工具，源码可以在百度上搜,以Imx6为例的使用方法 rootimx6qsabresd:~# rootimx6qsabresd:~# rootimx6qsabresd:~# df Filesystem 1K-blocks Used Available Use% Mounted on /dev/root 289293 197510 76423 73% / devtmpfs …...

编程日记 2025/6/24 20:08:58

使用Linux的logrotate工具切割日志：Tomcat、NGINX（journal文件清理）

文章目录引言I Tomcat日志切割配置轮转参数验证码II NGINX访问文件的配置和切割access.log 访问日志的配置使用Linux的logrotate工具切割日志验证文件切割III /run/log/journaljournalctl文件清理引言 journal文件清理：只保留过去两天，清理之前的文件 journalctl --vacuu…...

编程日记 2025/6/20 16:47:25

shell脚本1

运行脚本 1、先创建一个sh脚本文件,里面输入一个输出网站的命令，比如echo www.baidu.com vim 1.sh2、可以利用以下三种方式、这三种其实不管哪种脚本解释器最后调用的还是这个dash,下面是解释为什么调用都是dash，我们ls可以发现最后目录都是指向了dash…...

编程日记 2025/6/4 17:12:21

Qt-chart 画折线图(以时间为x轴)

上图代码 #include <iostream> #include <random> #include <qcategoryaxis.h>void MainWindow::testLine() {//1、创建图表视图QChartView* view new QChartView(this);//2.创建图表QChart* chart new QChart();//3.将图表设置给图表视图view->setCh…...

编程日记 2025/6/20 20:41:04

【kubernetes】kubectl get nodes报NotReady

目录 1. 说明2. 问题描述3. kube-flannel.yml 1. 说明 1.这里k8s的版本是v1.17.4。2.若kube-flannel.yml中的镜像拉取不下来，可以下载本文章的文件资源，手动docker load -i ***.tar的方式。3.v1.17.4的kube-flannel.yml参考下面代码。4.通过kubectl get…...

编程日记 2025/6/19 19:53:12

分布式开发学习

1、kratos的特点 gRPC：Kratos 默认支持 gRPC，提供高性能的远程调用能力，适用于微服务间通信。 HTTP ：同时支持 HTTP/1.1 和 HTTP/2，方便微服务与外部系统交互。 Protocol Buffers： protoc 工具生…...

编程日记 2025/5/30 14:16:47

软件测试的几种方法详解

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 1、从是否关心内部结构来看 (1)白盒测试：又称为结构测试或逻辑驱动测试，是一种按照程序内部逻辑结构和编码结构，设计测试数据并…...

编程日记 2025/6/20 12:58:09

C语言---int r 与 int r=数的区别

int r 在这里面声明了一个变量r，创建了内存空间 int r 2 声明了一个整数类型的变量r，并给它赋值（初始值）为2，创建内存空间并赋值。...

编程日记 2025/5/14 16:53:53

matlab测试ADC动态性能的原理

目录摘要： 简介： 动态规范和定义动态规格： 双面到单边的功率谱转换摘要： 模数转换器（adc）代表了接收器、测试设备和其他电子设备中的模拟世界和数字世界之间的联系。正如本文系列的第1部分中所概述…...

编程日记 2025/6/24 14:17:49

XDOJ 877 图的深度优先遍历

题目：图的深度优先遍历问题描述已知无向图的邻接矩阵，以该矩阵为基础，给出深度优先搜索遍历序列，并且给出该无向图的连通分量的个数。在遍历时，当有多个点可选时，优先选择编号小的顶点。（即…...

编程日记 2025/5/31 17:09:26

内网穿透讲解

什么是内网穿透内网穿透是一种网络技术，它允许外网或者其他局域网的用户来访问这个局域网的服务器资源，让资源的利用率更高，更加灵活，但是也要确保网络安全。工作原理如果你在公司，但是你需要使用到你家里的那台电…...

编程日记 2025/6/24 9:11:04

怎么规划一个呼叫中心大模型呼入部门？设置哪些岗位？

怎么规划一个呼叫中心大模型呼入部门？设置哪些岗位？ 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 规划一个呼叫中心大模型呼入部门是一个复杂而细致的过程，涉及多个层面的…...

编程日记 2025/6/20 23:06:44

企业级Nginx Web服务优化实战（上）

一 ，Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息一般来说 ，软件的漏洞都和版本有关 ，这个很像汽车的缺陷 ，同一批次的要有问题就都有问题 ，别的批次可能就都是好的。因此 ，我们应尽量隐藏或…...

编程日记 2025/6/20 19:23:18

Redisson常用方法

Redisson 参考: 原文链接定义：Redisson 是一个用于与 Redis 进行交互的 Java 客户端库优点：很多 1. 入门 1.1 安装  <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifa…...

编程日记 2025/6/24 9:10:44

【树莓派4B】MindSpore lite 部署demo

一个demo，mindspore lite 部署在树莓派4B ubuntu22.04中，为后续操作开个门！ 环境开发环境：wsl-ubuntu22.04分发版部署环境：树莓派4B，操作系统为ubuntu22.04mindspore lite版本：mindspore-li…...

编程日记 2025/6/20 17:38:10

ESP32-S3模组上跑通ES8388（30）

接前一篇文章：ESP32-S3模组上跑通ES8388（29）二、利用ESP-ADF操作ES8388 2. 详细解析上一回终于解析完了es8388_init函数的所有代码。本回回到调用它的地方，继续往下讲解。我们是从ESP32-S3模组上跑通ES8388（7）-CSDN博客开始进入es8388_init函数，展开对于它的解析的…...

编程日记 2025/6/19 19:20:26

网络安全渗透测试概论

渗透测试，也称为渗透攻击测试是一种通过模拟恶意攻击者的手段来评估计算机系统、网络或应用程序安全性的方法。目的旨在主动发现系统中可能存在的安全漏洞、脆弱点以及潜在风险，以便在被真正的恶意攻击者利用之前，及时进行修复和加固&…...

编程日记 2025/6/21 18:00:56

.NET6 WebAPI从基础到进阶--朝夕教育

1、环境准备 1. Visual Studio 2022 2. .NET6 平台支持 3. Internet Information Services 服务器（ IIS ） 4. Linux 服务器【 CentOS 系统】 ( 跨平台部署使用 ) 5. Linux 服务器下的 Docker 容器（ Docker 部署使用） …...

编程日记 2025/6/20 18:35:54

opencv通过3种算子进行边缘提取

Scharr算子是效果比较好的,但从肉眼看sobel算子比较顺眼 # 导入OpenCV库，用于图像处理 import cv2 import numpy as np # 从matplotlib库中导入pyplot模块，用于绘制图像 from matplotlib import pyplot as plt # 创建一个名为window的窗口，窗…...

编程日记 2025/6/3 7:51:17

【KodExplorer】可道云KodExplorer-个人网盘安装使用

说明：安装kodExplorer （不是Kodbox）；Kodbox需求服务器至少2核4G内存，要求环境具备php/redis/mysql/。安装kodExplorer 就是比较方便简单部署，个人版免费。一、安装环境需求服务器: Windows，…...

编程日记 2025/6/22 13:29:36

并查集基础

abstract 并查集（Union-Find Set）是一种数据结构，主要用于处理动态连通性问题（Dynamic Connectivity Problem），例如在图论中判断两点是否属于同一个连通分量，以及动态地合并集合。它广泛应用…...

编程日记 2025/6/21 11:28:14

FPGA 16 ，Verilog中的位宽：深入理解与应用

目录前言一. 位宽的基本概念二. 位宽的定义方法 1. 使用向量变量定义位宽 ① 向量类型及位宽指定 ② 位宽范围及位索引含义 ③ 存储数据与字节数据 2. 使用常量参数定义位宽 3. 使用宏定义位宽 4. 使用[:][-:]操作符定义位宽 1. 详细解释 : 操作符 -: 操作符 …...

编程日记 2025/5/31 19:16:17

相关文章：