html标签“重叠”是布局失控结果，非对齐方式；需先阻止意外重叠（如设position: relative确立定位上下文、避免inline自定义标签、清除浮动），再通过flex/grid/绝对定位+transform实现可控居中或层叠。
HTML标签“重叠”本身不是一种对齐方式，而是布局失控的结果；所谓“对齐”，实际是要先**阻止意外重叠**，再按需实现**可控的层叠与居中**。
为什么 label 或 div 看起来重叠了
常见现象是两个元素视觉上压在一起，比如表单里两个 label 叠在同一个位置，或自定义标签 <sec-2></sec-2> 后面的 <div class="sec3"> “挤上去”。这几乎总是因为：
<ul>
<li>父容器没设 <code>position: relative，导致子元素用 position: absolute 时都相对于同一祖先定位
<sec-2></sec-2>），浏览器默认按 display: inline 渲染，不占整行，后续块级元素自然上浮margin 合并（尤其是相邻 <p></p> 或 <div> 的上下边距）造成视觉“塌陷”，误以为重叠
<h3>想让一个元素精确覆盖在另一个正中心</h3>
<p>这不是靠“重叠对齐”，而是靠**定位锚点 + 偏移控制**。三种可靠方式：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<strong>Flex 方案</strong>：父容器加 <code>display: flex; justify-content: center; align-items: center; —— 子元素自动居中，无需知道宽高display: grid; place-items: center; —— 更简洁，二维居中一步到位position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，且父容器必须有 position: relative
表单中多个浮动 label 互相覆盖怎么办
典型场景：双列输入框（First Name / Last Name）的 label 全堆在左上角。根本原因是它们共享同一个定位上下文。
- 错误写法：
.itemForm { position: relative; }—— 它包裹了两个<div>，但每个 <code><label></label>仍相对于.itemForm定位 - 正确做法：给每个输入项的直接父
<div> 加 <code>position: relative，例如.itemForm > div { position: relative; } - 这样每个
<label></label>就只相对于自己的<div> 定位，互不干扰 <h3>别被 mix-blend-mode 带偏</h3> <p><code>mix-blend-mode不解决重叠，也不参与对齐。它只在两个元素**已经重叠的前提下**混合像素颜色。你加了mix-blend-mode: multiply，但元素还没真正叠上去，它就完全没效果。最容易被忽略的一点：重叠是结果，不是手段；对齐是意图，不是巧合。先用定位、Flex 或 Grid 控制位置关系，再考虑是否需要混合、遮罩或 z-index 分层 —— 顺序错了，调试半天也白搭。
