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

CSS 浮动与定位以及定位中z-index的堆叠问题

news 来源：原创 2025/6/10 0:30:31

CSS 浮动与定位以及定位中z-index的堆叠问题

一、浮动布局的特点与应用

1. 浮动核心特性

脱离标准流：浮动元素会脱离文档流。
环绕特性：后续内容会环绕浮动元素排列
自动换行：多个浮动元素在容器宽度不足时自动换行

.float-box {float: left; /* 或 right */width: 200px;margin: 10px;
}

2. 浮动典型应用场景

图文混排：实现文字环绕图片效果
多栏布局：创建水平排列的导航菜单(水平显示加浮动)

3. 清除浮动技巧

/* 方法1：clearfix hack */
.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}/* 方法2：创建BFC */
.container {overflow: hidden;
}

二、定位布局的特点与应用

1. 定位类型对比

定位方式	参照基准	是否脱离文档流	典型应用场景
`static`(默认)	正常流	否	常规布局
`relative`	自身原始位置	否	正常调整元素位置
`absolute`	最近非static定位祖先	是	绝对定位
`fixed`	浏览器视窗	是	固定导航/悬浮按钮
`sticky`	浏览器视窗	否	实现粘性效果

2. 定位布局

/* 相对定位示例 */
.tooltip {position: relative;
}
.tooltip::after {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);
}/* 固定定位示例 */
.header {position: fixed;top: 0;width: 100%;z-index: 100;
}/* 粘性定位示例 */
.section-title {position: sticky;top: 20px;
}

在显示布局页面中，常常使用相对和绝对定位，在嵌套过程中也常常是父盒子为相对定位，子盒子绝对定位即子绝父相。

3.固定定位的使用，绝对，相对定位的结合

网页设置中要先设置网页的版心，这里实现一个固定定位跟随版心，以及一个绝对定位居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.w {width: 800px;height: 2000px;background-color: pink;/*版心的盒子居中*/margin: 0 auto;}/* 绝对定位的盒子不能通过margin: 0 auto 实现居中 */.fixed {position: fixed;/* 固定的盒子先走 浏览器界面的一半 */left: 50%;/* right: 50; *//* 之后走版心的盒子的一半 */margin-left: 405px;top: 200px;width: 50px;height: 150px;background-color: skyblue;}.cen {position: absolute;left: 50%;top: 50%;width: 200px;height: 200px;transform: translate(-50%, 0);/* transform(0,-50%);与下面这一属性设置的等同都实现了向上移动自身高度的一半 */margin-top: -100px;background-color: purple;}</style>
</head><body><div class="fixed"></div><div class="w"><div class="cen"></div></div>
</body></html>

渲染效果如下：

固定定位和绝对定位

三、z-index与层叠上下文

1. z-index核心规则

仅对定位元素生效：position值非static时才有效
数值越大越靠前：可正可负，默认auto(相当于0)，如果有嵌套现象但并没对子盒子设置，那么子盒子与父盒子在同一堆叠上下文中。
同层级比较：比较相同堆叠上下文中的z-index值，子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。

2. 层叠上下文创建条件

根元素(HTML)
position非static且z-index非auto
opacity < 1
transform/filter非none
flex/grid容器的子项且z-index非auto

3. 嵌套元素的z-index陷阱

<div class="parent" style="position: relative; z-index: 1;"><div class="child" style="position: absolute; z-index: 100;"><!-- 无法突破父级的层叠上下文 --></div>
</div>
<div class="sibling" style="position: relative; z-index: 2;"><!-- 会覆盖整个parent层叠上下文 -->
</div>

关键结论：
子元素的z-index只在当前层叠上下文中有效，无法超越父级上下文与其他上下文的比较结果
下述例子取自z-index堆叠规则-starof

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Stacking without z-index</title><style type="text/css">div {font: 12px Arial;text-align: center;opacity: 0.7;}.bold { font-weight: bold; }#normdiv {z-index: 8;height: 70px;border: 1px dashed #999966;background-color: #ffffcc;margin: 0px 50px 0px 50px;}#reldiv1 {z-index: 3;height: 100px;position: relative;top: 30px;border: 1px dashed #669966;background-color: #ccffcc;margin: 0px 50px 0px 50px;}#reldiv2 {z-index: 2;height: 100px;position: relative;top: 15px;left: 20px;border: 1px dashed #669966;background-color: #ccffcc;margin: 0px 50px 0px 50px;}#absdiv1 {z-index: 5;position: absolute;width: 150px;height: 350px;top: 10px;left: 10px;border: 1px dashed #990000;background-color: #ffdddd;}#absdiv2 {z-index: 1;position: absolute;width: 150px;height: 350px;top: 10px;right: 10px;border: 1px dashed #990000;background-color: #ffdddd;}</style>
</head><body><br /><br /><div id="absdiv1"><br /><span class="bold">DIV #1</span><br />position: absolute;<br />z-index: 5;</div><div id="reldiv1"><br /><span class="bold">DIV #2</span><br />position: relative;<br />z-index: 3;</div><div id="reldiv2"><br /><span class="bold">DIV #3</span><br />position: relative;<br />z-index: 2;</div><div id="absdiv2"><br /><span class="bold">DIV #4</span><br />position: absolute;<br />z-index: 1;</div><div id="normdiv"><br /><span class="bold">DIV #5</span><br />no positioning<br />z-index: 8;</div></body>
</html>

相应的渲染效果：

渲染效果

4.z-index设置

存在多个堆叠层时，每个层设置时可以以100为间隔，设置的大一点会更容易确定渲染顺序，比如第一个的z-index为0，第二个的z-index为100，设置第三个的z-index为200。后期如果需要添加一些层的话，以10为间隔，设置z-index为10，20，再需要添加的话以5为间隔，这样的写法可以方便后期扩展添加内容。
在做图文替换的时候可以使用负值。

5. z-index失效排查步骤

检查position是否为static
检查是否处于低优先级的堆叠上下文中
检查祖先元素是否创建了新的堆叠上下文

四、浮动与定位的对比选择

特性	浮动布局	定位布局
文档流影响	半脱离(保留位置)	完全脱离(不占位)
主要用途	文字环绕	精准定位/复杂层叠

使用建议：

优先考虑Flex/Grid实现整体布局
浮动用于传统浏览器支持或文字环绕
定位布局用于需要精确控制层叠关系的场景

五、常见问题解决方案

1. 浮动布局的容器塌陷

/* 现代解决方案 */
.container {display: flow-root;
}

2. 定位元素的居中问题

.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

3. z-index失效排查步骤

检查position是否为static
检查是否处于低优先级的层叠上下文中
检查祖先元素是否创建了新的层叠上下文

CSS 浮动与定位以及定位中z-index的堆叠问题

CSS 浮动与定位以及定位中z-index的堆叠问题一、浮动布局的特点与应用 1. 浮动核心特性脱离标准流：浮动元素会脱离文档流。环绕特性：后续内容会环绕浮动元素排列自动换行：多个浮动元素在容器宽度不足时自动换行 .float-box {float: lef…...

编程日记 2025/5/31 9:50:56

在Maven中替换文件内容的插件和方法

在Maven中替换文件内容的插件和方法 Maven提供了几种方式来替换文件内容，以下是常用的插件和方法： 1. maven-replacer-plugin (推荐) 这是专门用于文件内容替换的插件，功能强大且灵活。基本配置 <plugin><groupId>com.goog…...

编程日记 2025/5/18 8:07:14

C# lock

在C#中，lock关键字用于确保当一个线程位于给定实例的代码块中时，其他线程无法访问同一实例的该代码块。这是一种简单的同步机制，用来防止多个线程同时访问共享资源或执行需要独占访问的代码段（临界区），从而…...

编程日记 2025/5/31 8:48:49

OGGMA 21c 微服务 (MySQL) 安装避坑指南

前言这两天在写 100 天实战课程的 OGG 微服务课程： 在 Oracle Linux 8.10 上安装 OGGMA 21c MySQL 遇到了一点问题，分享给大家一起避坑！ 环境信息环境信息： 主机版本主机名实例名MySQL 版本IP 地址数据库字符集Goldengate …...

编程日记 2025/6/1 9:16:30

NPN、PNP三极管的应用

由于电路知识实在是难以拿出手，在面试的时候被问到三极管相关问题，相当地尴尬。在网上简要地学习了相关的理论知识，在这里给出自己的理解。更为基础的原理在这里并不提及。我们面向实际应用学习即可。我们知道常见的三极管总是硅管&#xff…...

编程日记 2025/6/1 16:59:18

Cadence Allegro安装教程及指导

Cadence Allegro 是一款专业的 PCB 设计软件，被广泛应用于电子行业。它功能强大，能够处理复杂的电路板设计任务。下面为你详细介绍 Cadence Allegro 的安装步骤。一、安装前准备在安装 Cadence Allegro 之前，需要进行一系列准备工作&…...

编程日记 2025/5/18 8:06:11

阿里通义万相 Wan2.1-VACE：开启视频创作新境界

2025 年 5 月 14 日，阿里巴巴为视频创作领域带来了重磅惊喜 —— 开源通义万相 Wan2.1-VACE。这一模型堪称视频生成与编辑领域的集大成者，凭借其全面且强大的功能，为广大创作者、开发者以及企业用户开辟了全新的视频创作天地。它打破了以往视…...

编程日记 2025/5/31 8:21:25

mAP、AP50、AR50：目标检测中的核心评价指标解析

在目标检测任务中，评价指标是衡量模型性能的核心工具。其中，mAP（mean Average Precision）、AP50（Average Precision at IoU0.5）和AR50（Average Recall at IoU0.5）是最常用的指标。本…...

编程日记 2025/6/1 9:18:11

Linux进程异常退出排查指南

在 Linux 中，如果进程无法正常终止（如 kill 命令无效）或异常退出，可以按照以下步骤排查和解决： 1. 常规终止进程尝试普通终止（SIGTERM） kill PID # 发送 SIGTERM 信号（…...

编程日记 2025/6/3 22:59:38

深入解析：如何基于开源OpENer开发EtherNet/IP从站服务

一、EtherNet/IP协议概述 EtherNet/IP（Industrial Protocol）是一种基于以太网的工业自动化通信协议，它将CIP（Common Industrial Protocol）封装在标准以太网帧中，通过TCP/IP和UDP/IP实现工业设备间的通信。作为ODVA（Open DeviceNet Vendors Association）组织的核心协议…...

编程日记 2025/5/31 11:10:30

【Linux 学习计划】-- yum

目录什么是yum Linux的生态讲解 yum相关操作 yum源 yum配置相关问题结语什么是yum 我们的手机上都有手机自带的软件商城，我们下载软件都可以在上面搜索，安装，下载而我们的yum就是这么一个东西，他其实就是Linux下的安装…...

编程日记 2025/6/1 8:31:56

1、左边： 示例代码： CDockManager::setConfigFlags(CDockManager::DefaultOpaqueConfig); CDockManager::setConfigFlag(CDockManager::FocusHighlighting, true); dockManager new CDockManager(this); // Disabling the Internal Style S…...

编程日记 2025/5/23 14:16:08

Flink 数据传输机制

在 Apache Flink 中，数据传输（Data Transmission）机制是其分布式流处理能力的核心之一。Flink 通过高效的内部数据交换、网络通信和序列化机制，确保任务之间的数据能够高效、可靠地流动。一、Flink 数据传输的基本流程 Source …...

编程日记 2025/5/18 7:59:53

数据库——SQL约束窗口函数介绍

4.SQL约束介绍 （1）主键约束 A、基本内容基本内容 p r i m a r y primary primary k e y key key约束唯一表示数据库中的每条记录主键必须包含唯一的值（UNIQUE）主键不能包含NULL值（NOT NULL）每个表都应…...

编程日记 2025/6/1 17:02:02

第8讲、Multi-Head Attention 的核心机制与实现细节

🤔 为什么要有 Multi-Head Attention？ 单个 Attention 机制虽然可以捕捉句子中不同词之间的关系，但它只能关注一种角度或模式。 Multi-Head 的作用是： 多个头多个视角同时观察序列的不同关系。例如： 一个头可能专…...

编程日记 2025/6/1 11:57:45

【发票提取表格】批量PDF电子发票提取明细保存到Excel表格，批量提取ODF电子发票明细，行程单明细，单据明细保存到表格，使用步骤、详细操作方法和注意事项

在日常办公中，我们常常会面临从大量 PDF 电子发票、ODF 电子发票、行程单及各类单据中提取明细，并整理到 Excel 表格的艰巨任务。手动操作不仅耗时费力，还极易出错。以下为您详细介绍其使用步骤、操作方法、注意事项及应用场景。一、适用场…...

编程日记 2025/5/30 12:01:02

React中startTransition的使用

// 引入 React 的 Hook API：useState 管理状态、useTransition 处理非紧急更新、useMemo 缓存计算结果 import { useState, useTransition, useMemo } from react;/*** List 组件：* 根据输入的 query 动态渲染一个包含 10000 条数据的列表*/ function Li…...

编程日记 2025/5/18 7:57:47

Reactor (epoll实现基础）

Reactor 是什么？ Reactor 网络模型是一种高性能的事件驱动模型，广泛应用于网络编程中。它通过 I/O 多路复用技术，实现了高效的事件处理和系统吞吐量的优化。核心概念 Reactor 模型_的核心是事件驱动，即当 I/O 事件准备就绪时_…...

编程日记 2025/6/1 16:08:51

php fiber 应用

参考基于 PHP Fiber（纤程）的游戏开发分析-腾讯云开发者社区-腾讯云PHP 8.1 引入的 Fibers 为游戏开发带来新机遇，能管理渲染、物理计算等任务且不阻塞主线程。它支持并发，提升效率，简单易用，但也有局限&a…...

编程日记 2025/6/1 18:37:26

前端扫盲HTML

文章目录下载、安装、运行第一个代码（hello world）创建代码文件编辑代码（hello world）HTML常见标签注释标签标题标签段落标签换行标签格式化标签图片标签表格标签列表标签表单标签下拉菜单无语义标签参考文档下载、安装、运行第…...

编程日记 2025/5/31 5:48:32

RAG与微调：企业知识库落地的技术选型

从本质上看，RAG是"让模型查阅外部知识"，而微调是"让模型学会并内化知识"。这一根本差异决定了它们在不同场景下的适用性。技术选型的关键依据场景RAG微调说明模型定制化需求❌✅微调更适合塑造特定风格、口吻和人格特征硬件资源…...

编程日记 2025/6/1 16:24:42

Linux安全篇 --firewalld

一、Firewalld 防火墙概述 1、Firewalld 简介 firewalld 的作用是为包过滤机制提供匹配规则(或称为策略)，通过各种不同的规则告诉netfilter 对来自指定源、前往指定目的或具有某些协议特征的数据包采取何种处理方式为了更加方便地组织和管理防火墙,firewalld 提供…...

编程日记 2025/6/4 6:40:05

关于Android Studio for Platform的使用记录

文章目录简单介绍如何使用配置导入aosp工程配置文件asfp-config.json 简单介绍 Android Studio for Platform是google最新开发，用来阅读aosp源码的工具详细的资料介绍： https://developer.android.google.cn/studio/platform 将工具下载下来直接点击…...

编程日记 2025/5/18 7:55:36

搜索引擎工作原理｜倒排索引｜query改写｜CTR点击率预估｜爬虫

写在前面使用搜索引擎是我们经常做的事情，搜索引擎的实现原理。什么是搜索引擎搜索引擎是一种在线搜索工具，当用户在搜索框输入关键词时，搜索引擎就会将与该关键词相关的内容展示给用户。比较大型的搜索引擎有谷歌，百度&…...

编程日记 2025/5/31 7:19:00

【找工作系列①】【大四毕业】【复习】巩固JavaScript，了解ES6。

文章目录前言Tasks:复习笔记：JavaScript是什么？JavaScript有什么用或者换句话说是做什么的？JavaScript由哪几部分组成？BOM?DOM?html文件中script标签放在哪里?🧩 1. **放在 ****<head>**** 中**✅ 优点&…...

编程日记 2025/6/1 5:56:59

Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接

Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接 1 说明2 客户端配置jdk环境3服务器检查oracle数据库补丁4设置ssla 服务器配置walletb 上传测试脚本和配置文件到客户端c 服务器修改数据库侦听和sqlnet.orad 修改客户端的sqlnet.ora和tnsnames.ora的连接符e 修改java代码的数据连接…...

编程日记 2025/5/18 7:53:31

本地部署开源网盘系统 kiftd 并实现外部访问（Linux 版本）

kiftd 是一款专为个人、团队及小型组织设计的开源网盘系统，兼具便捷性、跨平台兼容性与丰富的功能，成为替代传统文件共享工具的理想选择。本文将详细介绍如何在 Linux 系统本地部署 kiftd 并结合路由侠实现外网访问本地部署的 kiftd 。第一步&#x…...

编程日记 2025/5/18 7:53:30

ECS/GEM是半导体制造业的标准通信协议中host和equipment的区别是什么，在交互过程中，如何来定位角色谁为host，谁为equipment

文章目录一、角色定义与核心区别1. Host（主机）2. Equipment（设备）3. Host与Equipment的核心区别二、交互过程中的角色定位1. 交互方向2. 控制层级3. 交互过程中角色的定位方法3.1. 通信发起方向3.2. 协议功能与状态管理3.3. 物理…...

编程日记 2025/5/18 7:53:29

5000 字总结CSS 中的过渡、动画和变换详解

CSS 中的过渡、动画和变换详解一、CSS 过渡（Transitions） 1. 基本概念 CSS 过渡是一种平滑改变 CSS 属性值的机制，允许属性值在一定时间内从一个值逐渐变化到另一个值，从而创建流畅的动画效果。过渡只能用于具有中间值的属性&…...

编程日记 2025/5/18 7:53:29

2025年渗透测试面试题总结-安恒[实习]安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录安恒[实习]安全工程师一面 1. 自我介绍 2. 前两段实习做了些什么 3. 中等难度的算法题 4. Java的C…...

编程日记 2025/6/1 16:30:22

WebXR教学 09 项目7 使用python从0搭建一个简易个人博客

WebXR教学 09 项目7 使用python从0搭建一个简易个人博客（1） 前期设计规划功能呈现个人博客文章技术选型 HTMLCSSJSPythonFlask 环境准备 VS Code Python3.8 代码实现包 # 创建虚拟环境（-m 会先将模块所在路径加入 sys.path,更适…...

编程日记 2025/5/28 1:45:43

c++从入门到精通（五）--异常处理，命名空间，多继承与虚继承

异常处理栈展开过程： 栈展开过程沿着嵌套函数的调用链不断查找，直到找到了与异常匹配的catch子句为止；也可能一直没找到匹配的catch，则退出主函数后查找过程终止。栈展开过程中的对象被自动销毁。在栈展开的过程中&#xff0c…...

编程日记 2025/6/1 16:30:55

开源安全大模型Foundation-Sec-8B实操

一、兴奋时刻此时此刻，晚上22点55分，从今天早上6点左右开始折腾，花费了接近10刀的环境使用费，1天的休息时间，总算是把Foundation-Sec-8B模型跑起来了，中间有两次胜利就在眼前，但却总在远程端口转发环节出问题，让人难受。直到晚上远程Jupyter访问成功那一刻，眉开眼笑，…...

编程日记 2025/5/18 7:52:24

现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络

现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络引言：为什么需要优化算法？ 在当今这个数据驱动的时代，优化算法已成为计算机科学、工程设计、人工智能等领域的核心工具。无论是训练神经…...

编程日记 2025/6/1 16:13:36

Docker常见命令解读

上图是对docker常见命令的一个图解，方便大家理解，下面，我将对这些命令做一些解释。一、镜像生命周期管理 1. 镜像构建（Build） docker build -t my-image . # 根据Dockerfile构建镜像 Dockerfile：…...

编程日记 2025/6/3 17:00:20

为什么 Docker 建议关闭 Swap

在使用 Docker 时，关闭系统 Swap（交换分区） 是一个常见的推荐做法，尤其是在生产环境中。虽然 Docker 不强制要求禁用 Swap，但出于性能、稳定性、可控性和资源管理的目的，通常建议这样做。为什么 Docker 建…...

编程日记 2025/5/18 7:51:16

TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性

Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…...

编程日记 2025/5/25 6:48:53

WPS PPT设置默认文本框

被一个模板折磨了好久，每次输入文本框都是很丑的24号粗体还有行标，非常恶心，我甚至不知道如何描述自己的问题，非常憋屈，后来终于知道怎么修改文本框了。这种软件操作问题甚至不知道如何描述问题本身，非常烦…...

编程日记 2025/5/18 7:50:12

支持selenium的chrome driver更新到136.0.7103.94

最近chrome释放新版本：136.0.7103.94 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…...

编程日记 2025/5/18 7:50:12

“下一辆车还买小米”

大家好，我是小悟。就在5月13日，江西上饶德兴街头，一辆紫色小米SU7 Max停在路边，却遭遇了一场堪比灾难片的意外。一辆满载货物的大货车因手刹故障溜坡，径直撞向SU7，两车从两米高的落差坠落，货…...

编程日记 2025/6/1 12:34:32

opencv4.11生成ArUco标记 ArUco Marker

从opencv4.7开始aruco有了一些变化以下是opencv4.11生成ArUco标记的小例子 #include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/objdetect/aruco_detector.hpp>int main() {cv::Mat markerImage;cv::aruco::Dictionary dictionary cv…...

编程日记 2025/5/26 11:39:05

从辅助到协作：GitHub Copilot的进化之路

如果说现代程序员的标配工具除了VS Code、Stack Overflow之外，还有谁能入选，那一定是GitHub Copilot。从2021年首次亮相，到如今深度集成进开发者日常流程，这个“AI编程助手”已经不只是写几行自动补全代码的小帮手了，而…...

编程日记 2025/5/18 7:49:10

QMK 宏（Macros）功能详解（实战部分）

QMK 宏（Macros）功能详解（实战部分）一、宏的基本概念与作用宏（Macros）是 QMK 固件中一项强大的功能，它允许您在按下单个按键时执行多个按键操作。通过宏，您可以：输入常用短语或文本执行复杂的按键组合自动化重复性操作触发系统功能或快捷键🔔 安全提示：虽然可以…...

编程日记 2025/5/18 7:48:08

SVN 版本控制入门指南

SVN 版本控制系统详细入门指南一、SVN 基础概念详解 1. 什么是版本控制？ 版本控制是一种记录文件变化的系统，可以： 追踪文件的修改历史查看每次修改的内容恢复到任意历史版本协调多人协作开发 2. SVN 核心概念 2.1 仓库（Re…...

编程日记 2025/6/1 9:20:04

6to4、6over4的类比解释

本文由deepseek生成，特此声明 1. 6to4：自动的“快递中转站” 类比场景： 假设你住在一个偏远的小镇（IPv6网络），周围被大海（IPv4互联网）包围，你想给另一个偏远小镇&#…...

编程日记 2025/5/18 7:47:06

跨国应用程序的数据存储方案常见的解决方案

一、数据隐私与合规性跨国数据存储方案必须遵守不同国家和地区的数据隐私法律和规定，例如： GDPR（欧盟一般数据保护条例）CCPA（加利福尼亚消费者隐私法案）各国的本地数据存储法规解决方案：采用本地化存储：在不同国家或地区设立数据存储中心，以遵循当地的法律和隐私要…...

编程日记 2025/6/1 8:34:39

JSP链接MySQL8.0（Eclipse+Tomcat9.0+MySQL8.0）

所用环境 Eclipse Tomcat9.0 MySQL8.0.21(下载：MySQL Community Server 8.0.21 官方镜像源下载 | Renwole） mysql-connector-java-8.0.21（下载：MySQL :: Begin Your Download） .NET Framework 4.5.2（下…...

编程日记 2025/5/18 7:47:05

基于KAN+Transformer的专业领域建模方法论

一、专业领域KAN方法创新路径 1. 领域函数分解策略数学建模：针对专业领域特性设计专用基函数组合医学影像：采用小波变换基函数分解图像特征 class WaveletKAN(nn.Module): def __init__(self): self.wavelet_basis nn.Par…...

编程日记 2025/6/3 14:55:31

Go语言 Gin框架使用指南

Gin 是一个用 Go (Golang) 编写的 Web 框架。它具有类似 martini 的 API，性能要好得多，多亏了 httprouter，速度提高了 40 倍。如果您需要性能和良好的生产力，您一定会喜欢 Gin。Gin 相比于 Iris 和 Beego 而言，更倾向…...

编程日记 2025/5/18 7:46:04

内容安全：使用开源框架Caffe实现上传图片进行敏感内容识别

上传图片进行敏感内容识别预览效果环境准备 Ubuntu 16.04python 2.7.12caffe 1.0.0 安装调试环境: sudo apt-get update sudo apt-get install -y --no-install-recommends build-essential cmake git wget libatlas-base-dev libboost-all-dev libgflags-dev sudo apt-g…...

编程日记 2025/5/18 7:45:01

CSS 浮动与定位以及定位中z-index的堆叠问题

一、浮动布局的特点与应用

1. 浮动核心特性

2. 浮动典型应用场景

3. 清除浮动技巧

二、定位布局的特点与应用

1. 定位类型对比

2. 定位布局

3.固定定位的使用， 绝对，相对定位的结合

三、z-index与层叠上下文

1. z-index核心规则

2. 层叠上下文创建条件

3. 嵌套元素的z-index陷阱

4.z-index设置

5. z-index失效排查步骤

四、浮动与定位的对比选择

五、常见问题解决方案

1. 浮动布局的容器塌陷

2. 定位元素的居中问题

3. z-index失效排查步骤

相关文章：

3.固定定位的使用，绝对，相对定位的结合