HTML定位与z-index解析

苏承栈

2026-11-03 • 👁 0人浏览过

absolute

表示绝对定位，

relative

表示相对定位，两者在定位机制上存在本质区别。 1、相对定位指的是元素依据其在文档流中原本所处的位置进行偏移，而非相对于其他兄弟元素。 2、当将元素设置为相对定位时，它仍保留在标准文档流中，仅在其原始位置基础上进行上下左右的位移。 3、 } 4、此例中，灰色盒子采用相对定位，因此它是在自身原本位置的基础上，向下偏移了50像素，该偏移参照的是其未定位前的正常位置，而非红色盒子、绿色大容器或页面顶部。立即学习 “ 前端免费学习笔记（深入） ”； 5、绝对定位则使元素以最近的已定位（即

position

值为

relative

、

absolute

、

fixed

或

sticky

）祖先元素为参考点进行定位；若无此类祖先，则以初始包含块（通常是视口）为基准。 6、启用绝对定位后，元素将脱离标准文档流，不再占据原有空间，也不影响其他元素的布局。 7、 } 8、如图所示，灰色盒子设置了绝对定位，并以绿色父容器为定位上下文，因此它距离绿色容器顶部为50px，与红色盒子的位置无关。 9、

z-index

用于定义元素在 z 轴方向上的堆叠层级，仅对已定位元素（即

position

不为

static

）生效；数值越大，图层越靠前。 10、接下来分析如何让步骤2中的红色盒子显示在最上层，而灰色盒子处于底层。只需合理设置

z-index

值，即可精确控制各元素的层叠顺序，达成预期视觉效果。 11、为确保红色盒子始终位于顶层，将其

z-index

设为 2，从而高于同级其他已定位元素。 12、 } 13、 }

相关文章