html - 更好的是(从性能的 Angular 来看)用 z-index 堆叠隐藏元素或将它们移开 'horizontally' ？

Question

例如，我有一个视口(viewport) 100px * 100px和 8 <div> .

他们每个人都有风格:

position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;

<div> #1，如果可见，应该总是在其他的下面(z-index:0)；<div> #2，如果可见，应该始终在第一个之上但在其他之下(z-index:100)；

等等。

假设在给定时刻我只需要显示 <div> #1、#4 和#8，所以我分配 display: none;给其他人。

问题是:最好也“移走”隐藏元素 ( left: -10000; top: -10000 ) 还是这不会影响重绘的性能？

编辑:问题集中在性能上。我要问的是:一旦分配了一个元素 display: none ，浏览器渲染器(我想)在重绘周期中忽略了该元素。所以我认为搬走是完全没有用的。但我注意到在我的 Samsung Galaxy S2 和 Android 4.0.3 中，有很多垂直堆叠的 div 会导致性能问题，即使只有其中一些(2 或 3)可见而其他隐藏。当我试图移开它们时，我注意到性能提升非常非常小，小到可能根本不存在。然后我发布了这个问题:)

但是，有没有更好的方法可以达到这个效果呢？

Answer 1

最好显示:无；如果可能，如果不需要，请不要使用 position:absolute。