html - 多个 div 的 z-index 和位置

Question

我一直在搞乱 z-index 和位置属性，试图实现下面的 div 框设置。我应该使用什么位置，包括移动设备在内的所有设备可读的最大 z-index 应该是 99 对吗？我的 z-index 似乎偏离了。

<div style="width: 990px; border: 1px solid;">
  <div style="z-index: 1; border: 1px solid; background: #000; position:absolute;">
    Top div 1
  </div>
  <div style="z-index: -2; border: 1px solid; background: #000; position:absolute;">
    back div 2
  </div>
  <div style="z-index: -1; border: 1px solid; background: #000; position:absolute;">
    back div 3
  </div>
  <div style="z-index: 2; border: 1px solid; background: #000; position:absolute;">
    text div 4
  </div>
  <div style="z-index: 3; border: 1px solid; background: #000; position:absolute;">
    Top div 5
  </div>
  <div style="z-index: -1; border: 1px solid; background: #000; position:absolute;">
    Top div 6
  </div>
</div>

Answer 1

最靠后的和 textdiv 可以是 float div，分别向 left、left 和 right 调整它们的边距。

应该在其他(顶部、背面和顶部)之上的那些可以包装在 position:absolute div 中并且全部是 position:relative 。同样，应该利用它们的边距并设置较高的 z-index，例如 z-index:1000 以确保它们应该位于顶部。

这种方式比试图分别处理它们更简单。

希望这对您有所帮助。干杯