CSS系列（43）-- Anchor Positioning详解
前端技术探索系列：CSS Anchor Positioning详解 🎯
致读者：探索智能定位的艺术 👋
前端开发者们，
今天我们将深入探讨 CSS Anchor Positioning，这个强大的元素定位特性。
基础概念 🚀
锚点设置
/* 定义锚点 */
.anchor {anchor-name: --menu-anchor;position: relative;
}/* 使用锚点 */
.popup {position: absolute;anchor-default: --menu-anchor;
}/* 自动定位 */
.tooltip {position: absolute;top: anchor(--tooltip-anchor top);left: anchor(--tooltip-anchor left);
}
位置策略
/* 智能定位 */
.smart-popup {position: absolute;left: anchor(--anchor left);top: anchor(--anchor bottom);/* 自动调整策略 */anchor-placement: bottom-left;overflow-adjustment: auto;
}/* 多锚点定位 */
.complex-position {anchor-default: --primary-anchor;anchor-fallback: --secondary-anchor;position: absolute;
}
高级特性 🎯
自动调整
/* 视口自适应 */
.adaptive-popup {position: absolute;anchor-default: --button-anchor;/* 自动避免溢出 */overflow-positioning: auto;inset-inline: auto;inset-block: auto;
}/* 滚动容器处理 */
.scroll-aware {position: absolute;anchor-scroll: auto;anchor-default: --scroll-anchor;transform-box: view-box;
}
组合定位
/* 多维定位 */
.multi-anchor {position: absolute;left: anchor(--x-anchor center);top: anchor(--y-anchor center);/* 组合定位策略 */anchor-placement: center;anchor-size: contain;
}/* 相对定位 */
.relative-position {position: absolute;inset: anchor(auto);offset: 10px;
}
实际应用 💫
弹出菜单
/* 上下文菜单 */
.context-menu {position: absolute;anchor-default: --trigger-anchor;anchor-placement: bottom-start;/* 智能边界处理 */overflow-positioning: auto;margin: 8px;
}/* 子菜单 */
.submenu {position: absolute;anchor-default: --parent-item;anchor-placement: right-start;/* 防止溢出 */overflow-positioning: auto;inset-inline-end: 0;
}
工具提示
/* 智能提示框 */
.smart-tooltip {position: absolute;anchor-default: --element-anchor;/* 自动位置调整 */anchor-placement: top;anchor-size: content;/* 动画过渡 */transition: transform 0.2s;
}/* 箭头指示器 */
.tooltip-arrow {position: absolute;anchor-placement: bottom-center;rotate: 45deg;
}
交互增强 ⚡
滚动行为
/* 滚动跟随 */
.scroll-follow {position: absolute;anchor-default: --scroll-target;anchor-scroll: contain;/* 平滑过渡 */transition: transform 0.1s;
}/* 视口锁定 */
.viewport-lock {position: fixed;anchor-default: --viewport-anchor;anchor-lock: viewport;
}
动态定位
/* 动态更新 */
.dynamic-position {position: absolute;anchor-default: var(--current-anchor);/* 状态过渡 */transition: all 0.3s;
}/* 条件定位 */
@media (max-width: 768px) {.responsive-popup {anchor-placement: bottom;width: 100%;}
}
性能优化 🎨
渲染优化
/* 性能考虑 */
.optimized-anchor {will-change: transform;contain: layout;
}/* 层级优化 */
.layered-popup {transform: translateZ(0);backface-visibility: hidden;
}
降级处理
/* 特性检测 */
@supports (anchor-default: auto) {.enhanced-positioning {position: absolute;anchor-default: --modern-anchor;}
}/* 回退方案 */
.fallback {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
最佳实践建议 💡
-
布局策略
- 智能定位
- 边界处理
- 响应式适配
- 滚动处理
-
性能考虑
- 渲染优化
- 动画性能
- 资源管理
- 降级方案
-
开发建议
- 模块化设计
- 代码复用
- 测试验证
- 维护性考虑
-
用户体验
- 交互流畅
- 视觉反馈
- 可访问性
- 动画过渡
写在最后 🌟
CSS Anchor Positioning为我们提供了创建智能和动态布局的强大能力，通过合理运用这一特性，我们可以构建出更加灵活和专业的用户界面。
进一步学习资源 📚
- 定位策略指南
- 性能优化技巧
- 实战案例分析
- 最佳实践集合
如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇
终身学习，共同成长。
咱们下一期见
💻
相关文章：
CSS系列（43）-- Anchor Positioning详解
前端技术探索系列：CSS Anchor Positioning详解 🎯 致读者：探索智能定位的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Anchor Positioning，这个强大的元素定位特性。 基础概念 🚀 锚点设…...
测试带宽上行方法
测试宽带上行速度的软件有多种，以下是一些常见的选择： Speedtest 平台支持：iOS、Android、Windows、MacOS等 特点：全球知名的网络测速软件，测试结果准确，支持多平台。用户可以选择最近的服务器进行测试&am…...
pugixml XML配置文件 的增删改查
<?xml version"1.0" encoding"UTF-8"?> <SXConfiguration><LocalSetting><VMSLoginServer><exitServerName>2</exitServerName><server><name>2</name><ip>152.131.121.131</ip><…...
自动化办公-将 Excel 的 Sheet 页拆分成单独的 Excel 文件
在日常的数据处理工作中，很多时候我们会遇到一个包含多个工作表（Sheet）的 Excel 文件，可能需要将每个工作表分别保存为独立的 Excel 文件。手动进行这种操作非常繁琐且易出错，但借助 Python 中的 pandas 库，…...
安全漏洞合集
一，X-Content-Type-Options响应头降低XSS攻击的风险 在Nginx配置文件中，可以使用add_header指令来添加自定义的HTTP响应头。 （通常是nginx.conf或站点特定的配置文件）添加以下指令来设置X-Content-Type-Options响应头：…...
python 堆排序（Heap Sort）
堆排序（Heap Sort） 堆排序是一种基于二叉堆数据结构的排序算法。它的基本思想是：将待排序的数组构建成一个最大堆（或最小堆），然后依次将堆顶元素（最大值或最小值）与堆的最后一个元素…...
word中文献引用[]符号的上下标格式修改
word中文献引用[]符号的上下标格式修改 百度网址 1、查找打开使用通配符，输入[[][0-9]{1,2}[]]，即可匹配所有的字[1],[12]这些字符，然后鼠标点击替换为的空白处，再点击特殊格式–>“字体”，选中上标，最…...
地心地固坐标系
地心地固坐标系（ECEF, Earth-Centered, Earth-Fixed） 是一种三维坐标系，常用于表示地球表面或地球内部的点的位置。它的特点是坐标系的原点位于地球的质心，并且坐标轴固定在地球表面，并随地球自转而旋转。 ECEF 坐标系…...
3.CSS字体属性
3.1字体系列 CSS使用font-family属性定义文本的字体系列。 p{font-family:"微软雅黑"} div{font-family:Arial,"Microsoft Yahei",微软雅黑} 3.2字体大小 css使用font-size属性定义字体大小 p{ font-size:20px; } px(像素)大小是我们网页的最常用的单…...
使用PyTorch实现的二分类模型示例，综合了CNN、LSTM和Attention技术
以下是一个使用PyTorch实现的二分类模型示例，综合了CNN、LSTM和Attention技术，并尝试满足你提出的各项需求： 1. 数据预处理 扩充输入数据维度 假设你的原始数据是二维的（例如图像或序列数据），可以通过一些变换来扩充维度。例如，对于图像数据，可以进行翻转、旋转、缩放…...
[Wi-Fi]802.11u Vs hotspot2.0
介绍 802.11u 和 Hotspot 2.0 是两个相关但不同的技术标准，它们都旨在改善无线网络的用户体验，特别是在公共 Wi-Fi 环境中。 802.11u 定义：802.11u 是 IEEE 802.11 标准的一个扩展，专注于增强无线网络的互操作性和用户体验。功能…...
VisualStudio 2019 升级遇到的问题及解决
事件起因 今天计划想研究下.net core（后面版本直接称为 .net ）,发现 .net sdk 5.0 最新版本安装不成功。解决之后，真是手欠，看着Visual Studio 2019 有更新了，就直接点击了，这时才发现问题大了。。。 安装…...
日志门面_SLF4J集成logback 及 原理分析)
Java - 日志体系_Simple Logging Facade for Java (SLF4J)日志门面_SLF4J集成logback 及 原理分析
文章目录 Pre官网集成步骤POM依赖使用第一步：编写 Logback 的配置文件第二步：在代码中使用 SLF4J 原理分析1. 获取对应的 ILoggerFactory2. 根据 ILoggerFactory 获取 Logger 实例3. 日志记录过程 小结 Pre Java - 日志体系_Apache Commons Logging&…...
机器学习-方案设计题（在线医疗诊断项目）
在一个在线医疗诊断项目中，我们希望利用机器学习算法来预测患者是否患有某种疾病。请设计一个方案，包括数据收集、预处理、特征选择、模型选择和评估等步骤来完成这个任务。 1.数据收集数据来源 电子病历系统：收集患者的基本信息&…...
基于Sentinel的服务保护方案的三种方式（请求限流、线程隔离、服务熔断）超详细讲解
目录 1、三种方式介绍 1.1请求限流 1.2 线程隔离方案 1.3 服务熔断 2、基于sentinel实现 2.1 启动sentinel 2.2 基于springboot整合sentinel 2.2.1请求限流 2.2.2请求隔离 2.2.2.1 OpenFeign整合Sentinel 2.2.3 服务熔断 2.2.3.1 编写降级代码 2.2.3.2 服务熔断 1、…...
[开源]C++代码分享
一，声明 被人水平有限，开源只是为了分享。勿喷！！！还请大佬指点。 二，代码 // --------------------------------------------------------- 头文件 ----------------------------------------------- #in…...
vulnhub ica1
搭建靶机跟之前一样 不过这个要修改一下网卡;下面链接有教程 vulnhub jangow靶机-CSDN博客 1.扫描靶机IP arp-scan -l 192.168.47.135 2.信息收集 nmap -sS 192.168.47.135 访问网站 这个是一个web应用，框架是qdpm 9.2 在kali上搜索一下发现有两个漏洞&#x…...
基础命令/常用命令说明)
Linux(Centos 7.6)基础命令/常用命令说明
1.目录相关命令 命令命令说明pwd用于显示/打印当前目录位置。ls/ll 列出当前目录下的文件或者目录，ll是ls -l的别名，ls仅显示名称，ll会显示详细的目录文件信息。 cd目录切换，常见用法有，cd /切换到根目录，…...
Solon 加入 GitCode：助力国产 Java 应用开发新飞跃
在当今数字化快速发展的时代，Java 应用开发框架不断演进，开发者们始终在寻找更快、更小、更简单的解决方案。近期，Solon 正式加入 GitCode，为广大 Java 开发者带来全新的开发体验，尤其是在国产应用开发进程中ÿ…...
Browser Use：AI智能体自动化操作浏览器的开源工具
Browser Use：AI智能体自动化操作浏览器的开源工具 Browser Use 简介1. 安装所需依赖2. 生成openai密钥3. 编写代码4. 运行代码5. 部署与优化5.1 部署AI代理5.2 优化与扩展总结Browser Use 简介 browser-use是一个Python库，它能够帮助我们将AI代理与浏览器自动化操作结合起来；…...
ArcGIS中怎么进行水文分析？（思路介绍）
最近有人咨询，ArcGIS中怎么进行水文分析，大致的说一下河网提取的思路哈 解决思路：dem填洼→计算水流方向→计算水流累积矩阵→形成河网 dem填洼 计算水流方向 计算水流累积矩阵 用栅格计算器，设阈值（自己多次尝试&…...
2024年中国新能源汽车用车发展怎么样 PaperGPT（一）
概述 在国家政策的强力扶持下，2024年中国新能源汽车市场迎来了新的发展机遇。本文将基于《中国新能源汽车用车报告（2024年）》的数据，对新能源汽车的市场发展和用车趋势概述。 新能源汽车市场发展 政策推动：国家和地…...
KubeOS
title: 探秘 KubeOS：云原生操作系统的创新先锋 date: ‘2024-12-31’ category: blog tags: KubeOS云原生操作系统容器编排 sig: CloudNative archives: ‘2024-12’ author:way_back summary: KubeOS 作为一款专为云原生应用打造的操作系统，深度集成了…...
html文件通过script标签引入外部js文件，但没正确加载的原因
移动端H5应用，html文件通过script标签引入外部js文件，但没正确加载，在移动设备上难以排查。通过PC浏览器打开，发现js被阻止了：blocked:mixed-content。 原因在于： “blocked:mixed - content” 是浏览器的…...
[创业之路-225]：《华为闭环战略管理》-4-华为的商业智慧：在价值链中探索取舍之道与企业边界
目录 一、在价值链中探索取舍之道与企业边界 价值链的深刻洞察 取舍之道：有所为，有所不为 垂直整合与横向整合的平衡 企业边界与活动边界的界定 采购与外包的智慧运用 结语 二、企业外部价值流：上游、中游、下游、终端 上游…...
让 Agent 具备语音交互能力：技术突破与应用前景（16/30）
让 Agent 具备语音交互能力：技术突破与应用前景 一、引言 在当今数字化时代，人机交互方式正经历着深刻的变革。从早期的命令行界面到图形用户界面，再到如今日益普及的语音交互，人们对于与机器沟通的便捷性和自然性有了更高的追求…...
代理IP助力VR行业革新，小派科技引领技术潮流
随着VR行业的新一轮技术升级，更高分辨率、更宽视场角以及更舒适的佩戴体验已成为各大厂商竞争的核心。在这一浪潮中，小派科技凭借其最新发布的视网膜级VR头显——Crystal Super，成功吸引了市场的目光。而在这场技术革新的背后，代理…...
C#Halcon图像处理畸变校正之曲面校正
图像校正场景一般有两种，其一由镜头本身或安装角度引起，其二是被拍摄物品本身引起 理论处理流程 我的处理处理流程 1，加载网格校正图像 2，确定符合条件的网格区域 3，显示网格鞍点 4，显示网格线 5ÿ…...
JSON结构快捷转XML结构API集成指南
JSON结构快捷转XML结构API集成指南 引言 在当今的软件开发世界中，数据交换格式的选择对于系统的互操作性和效率至关重要。JSON（JavaScript Object Notation）和XML（eXtensible Markup Language）是两种广泛使用的数据表…...
Coroutine 基础四 —— CoroutineScope 与 CoroutineContext
1、定位 CoroutineContext，协程上下文。协程用到的所有信息都属于协程上下文，根据功能不同，划分成了不同的分类。管理流程用的是 Job，管理线程用的是 ContinuationInterceptor，等等。 CoroutineScope 的定位有两点&a…...
科技云报到：洞见2025年科技潮流，技术大融合开启“智算时代”
科技云报到原创。 随着2024年逐渐接近尾声，人们不禁开始展望即将到来的2025年。这一年，被众多科技界人士视为开启新纪元的关键节点。站在新的起点上，我们将亲眼目睹未来科技如何改变我们的世界。从人工智能到量子计算，从基因编辑…...
MySQL有哪些锁？
1.MySQL有哪些锁？ 全局锁表级锁 表锁元数据锁意向锁 行级锁 记录锁间隙锁临键锁临时意向锁 我了解的是MySQL的锁可以分为全局锁、表级锁、行级锁。 我比较熟悉的是表级锁和行级锁，如果我们对表结构进行修改时，MySQL就会对这个表结构加一个…...
通过交叉实现数据触底分页效果new IntersectionObserver（）（html、react、vue2、vue3）中使用
react中用法 import React, { useState, useEffect, useRef } from react;const InfiniteScroll () > {const [items, setItems] useState([]);const [loading, setLoading] useState(false);const [page, setPage] useState(1);const loaderRef useRef(null);// 模拟…...
DeepSeek-V3-Base 模型技术解析
DeepSeek-V3-Base 模型技术解析 目录 引言DeepSeek-V3-Base 模型概述模型架构 3.1 Transformer 基础3.2 DeepSeek-V3-Base 的改进 训练过程 4.1 数据预处理4.2 训练策略4.3 优化器与学习率调度 模型性能评估 5.1 基准测试5.2 实际应用案例 模型优化与调参 6.1 超参数调优6.2 …...
Qt5 中 QGroupBox 标题下沉问题解决
我们设置了QGroupBox 样式之后，发现标题下沉了，那么如何解决呢？ QGroupBox {font: 12pt "微软雅黑";color:white;border:1px solid white;border-radius:6px; } 解决后的效果 下面是解决方法： QGroupBox {font: 12pt "微软雅黑";color:white;bo…...
Linux Debian安装ClamAV和命令行扫描病毒方法，以及用Linux Shell编写了一个批量扫描病毒的脚本
ClamAV是一个开源的跨平台病毒扫描引擎，用于检测恶意软件、病毒、木马等安全威胁。 一、Linux Debian安装ClamAV 在Linux Debian系统上安装ClamAV，你可以按照以下步骤进行： 更新软件包列表： 打开终端并更新你的软件包列表&#…...
)
数据结构与算法之动态规划: LeetCode 53. 最大子数组和 (Ts版)
最大子数组和 https://leetcode.cn/problems/maximum-subarray/description/ 描述 给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和子数组是数组中的一个连续部分 示例 1 …...
活动预告 | Microsoft Azure 在线技术公开课：使用 Azure OpenAI 服务构建生成式应用
课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure OpenAI 服务构建生成式应用”活动，了解如何使用包括 GPT 在内的强大的…...
Python爬虫（二）- Requests 高级使用教程
文章目录 前言一、Session 对象1. 简介2. 跨请求保持 Cookie3. 设置缺省数据4. 方法级别参数不被跨请求保持5. 会话作为上下文管理器6. 移除字典参数中的值 二、请求与响应1. 请求与响应对象1.1 获取响应头信息1.2 获取发送到服务器的请求头信息 三、SSL 证书验证1. 忽略 SSL 证…...
协议幻变者：DeviceNet转ModbusTCP网关开启机器手臂智能新纪元
技术背景DeviceNet是一种广泛应用于工业自动化领域的现场总线标准，它能够实现控制器与现场设备之间的高效通信，常用于连接各种传感器、执行器以及其他工业设备，如机器人、电机驱动器等，具有实时性强、可靠性高的特点。而ModbusTCP…...
自定义有序Map
package cn.ziqirj.common.utils;import lombok.Getter; import lombok.Setter;import java.util.ArrayList; import java.util.List;/*** 模拟Map集合，key不可重复，按插入顺序排序* author zhangji** param <T>*/ public class CustomOrderlyMap&…...
CA系统的设计(CA证书生成，吊销，数字签名生成）
CA系统概述 CA认证系统是一种基于公钥密码基础设施（PKI）的信息安全技术，它可以为网络通信双方提供身份认证、数据加密、数字签名等功能。CA认证系统的核心是证书授权机构（CA），它负责为用户（节点…...
流计算需要框架吗？SPL 可能是更好的选择
流数据源通常是动态、无界的，看起来与静态、有限的批数据源区别较大，传统的数据库技术在架构上难以直接处理流数据源，只能让位于后来者。heron\samza\storm\spark\flink等计算框架最先完成突破，在流计算技术中占得先发优势。这些框…...
Vue-Router之嵌套路由
在路由配置中，配置children import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const router new VueRouter({mode: history,base: import.meta.env.BASE_URL,routes: [{path: /,redirect: /home},{path: /home,name: home,component: () &…...
MySQL 读写分离
MySQL 读写分离 一、配置主库(Master) 1.修改主库的配置文件 修改主库的 my.cnf 配置文件，生成二进制日志 (binary log) 和服务器唯一ID，这是实现主从复制的必要配置 [mysqld] # skip-grant-tables userroot port3306 basedir/usr/local/mysql datad…...
记一次音频无输出的解决方案
啊啊啊，刷个抖音就发现个死电脑死都不出声，捣鼓了一天才解决 打开wav文件时，提示错误找不到音频播放设备 0xc00d36fa 起初以为是声卡坏了，就到官网下载、更新了声卡驱动。无用什么驱动精灵也检测了，但也测不出啥来。…...
3D数学基础2
矩阵的行列式 在任意方阵中都存在至少一个标量，称作该方阵的行列式。在线性代数中，行列式有很多有用的性质 线性运算法则 方阵 M M M的行列式记作 ∣ M ∣ |M| ∣M∣或“det M”。非方阵矩阵的行列式是未定义的。 注意，在书写行列式时&…...
Java开发生态2024年度总结报告
1 关键要点 尽管数据显示 Java 17 是最常用 JDK，但其用户占比并未超过半数。根据 New Relic 2024 Java 生态系统状态报告，Java 17、11 和 8 的用户比例分别为 35%、33% 和 29%。New Relic 数据中所谓“快速采用”指 Java 21 的采用率仅为 1.4%。虽相较 J…...
1月第三讲：Java子线程无法获取Attributes的解决方法
在Java多线程编程中，开发者经常会遇到子线程无法获取主线程设置的Attributes的问题。Attributes通常用于存储与当前线程相关的数据，尤其在Web应用中，它们常用于请求上下文的管理。然而，由于Java线程是独立运行的，每个线…...
更新金碟云星空单据供应商和币别
--应付单 select FSUPPLIERID from [dbo].[T_AP_PAYABLE] where FBILLNO=AP2024121670 select FSUPPLIERID,FCURRENCYID,* from [dbo].[T_AP_PAYABLE] where FBILLNO=AP2024121670 -- update T_AP_PAYABLE set FSUPPLIERID=100567 where FBILLNO=AP2024121670 -- update T_…...