应删除float声明，仅保留position: absolute及偏移属性，并确保父容器设position: relative以提供定位上下文；浏览器会直接忽略float，因其对脱离文档流的absolute元素无效。
同一元素上写了 float 和 position: absolute 怎么办
浏览器会直接忽略 float，因为 position: absolute 元素完全脱离文档流，float 对它无效。你在 DevTools 的 Computed 面板里看到的 float 值永远是 none，但代码里留着它，只会让后续维护者误判意图。
- 立刻删掉所有
float声明（float: left、float: right等），只保留position: absolute及top/right等偏移值 - 如果原本靠
float实现左对齐，改用display: flex或text-align+inline-block - 别试图“保留
float再加absolute微调”——这不是叠加，而是覆盖行为，结果不可控
浮动父容器里 absolute 子元素定位跑偏
问题不在子元素，而在父容器没形成有效的定位上下文。浮动本身不触发定位上下文，position: absolute 会一路往上找，直到 body，导致位置失控。
- 给父容器加上
position: relative（哪怕它同时有float: left） - 更稳妥的做法：去掉父容器的
float，改用display: flex或grid控制整体布局 - 检查父容器是否设置了
overflow: hidden——这会裁剪溢出的absolute子元素，尤其影响下拉菜单、提示框
sticky 定位在 float 父容器中失效
根本原因是浮动导致包含块高度塌陷，而 position: sticky 必须依赖一个有明确高度、未被浮动破坏的包含块才能吸附。
- 不要只加
clear: both——它可能撑开视觉高度，但无法修复 sticky 所需的稳定包含块 - 把原浮动结构重构为 Flex：把并排块统一放进新容器，设
display: flex；sticky元素必须放在这个 flex 容器**外部**，作为其兄弟元素 - 确保
sticky元素的直接父容器不是display: flex或display: grid——它需要一个“普通流”的包含块
浮动元素和 absolute 元素视觉上重叠或错位
这不是 z-index 能简单解决的问题。absolute 元素不参与文档流，也不感知浮动元素的位置；浮动元素则随内容宽度动态变化，两者基准完全不同。
- 不要指望它们“对齐协作”——它们压根不在同一个布局体系里
- 需要右上角固定按钮？直接给按钮设
position: absolute; top: 10px; right: 10px，父容器加position: relative即可 - 若必须复用老代码中的浮动结构，把要精确定位的元素从浮动流中抽出来，单独作为一层放在父容器内
absolute 或 float 本身，而是你写的那行 position: relative 到底有没有生效——它必须是最近那个非 static 的祖先，而不是你“觉得应该算数”的那个浮动块。查 Computed 面板里的 Containing Block 字段，比肉眼判断可靠得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
