问：更新，为什么应该有一个“ z-index”可控制的要求？由于这些原因：
动态加载时，我们需要重新计算第一个到最后一个z-index。
如果元素很多，并且页面具有弹出窗口等，您是否要为浮动层设置一个大数字，例如1000000？如果是这样，整个页面的Z索引将失去控制。
类似地，当使用悬停元素时，需要动态计算其Z索引。
请注意项目“大小可变，数量可变”的要求
问题来了。SF长期以来没有遇到过具有挑战性的CSS问题。
需求：大小和数量
有一系列不确定彼此相对垂直的元素重叠20px，例如： 在悬停中，首先提到悬停的元素：（ 如果粉红色元素正在悬停，则将其悬停应该在最前面。）
您可以控制的内容：后端模板，CSS，JS
尽量不要使用JS进行布局
额外要求，您可以控制z-index吗？
建议在正常情况下，使用负边距会导致以下情况（遮挡的顺序恰好相反）：
答：看着上面的答案，我感觉很好。
但是回头看，问题中的描述如下：
有一系列大小和数量不同的元素，它们彼此相对垂直，重叠20px。
在这个问题上，有几点要点：
不定
不确定数量
这两个条件都不是问题，这是另一个：
它们相对垂直居中。
重叠部分为20px
则叠加部分为20px，易于使用。margin可以获得负值，然后还有另一种情况，不应使用垂直中心。margin-top也许padding-top这样做的方法是直接向下，但自然垂直居中。
那么垂直居中的方式是什么？如果使用CSS3，则可以通过一个元素直接对其进行修复。如果使用CSS3，则可以通过一个元素对其进行修复。inline-block这样，考虑每个元素之间的间距（如果使用了table这种方式），就需要考虑如何解决和处理元素叠加的问题。
从这个角度来看，我个人的观点是只应对此进行处理。垂直居中剩下的不是问题，因为在CSS中，只要它在uuuuuuuuuuu中，:hover有时，更改z-indexValue就可以了。在DOM的情况下，后面的元素必然要叠加在前面的元素上，如问题中所述。 而且，如果为每个元素设置一个实现它的方法，感觉不是很理想，不够灵活。因此，我所能想到的就是翻转元素的排列，然后进行遍历。进行更改应该可以。http://jsfiddle.net/b9gtqLb8/ 前额…似乎花了很多时间，因为情况有点多。好吧，让我们看一下较少的内容。http://jsfiddle.net/b9gtqLb8/2/
bVknXF
z-index:hoverz-index
float:right
答：但是回头看，问题中的描述如下：
有一系列大小和数量不同的元素，它们彼此相对垂直，重叠20px。
在这个问题上，有几点要点：
不定
不确定数量
这两个条件都不是问题，这是另一个：
它们相对垂直居中。
重叠部分为20px
则叠加部分为20px，易于使用。margin可以获得负值，然后还有另一种情况，不应使用垂直中心。margin-top也许padding-top这样做的方法是直接向下，但自然垂直居中。
那么垂直居中的方式是什么？如果使用CSS3，则可以通过一个元素直接对其进行修复。如果使用CSS3，则可以通过一个元素对其进行修复。inline-block这样，考虑每个元素之间的间距（如果使用了table这种方式），就需要考虑如何解决和处理元素叠加的问题。
从这个角度来看，我个人的观点是只应对此进行处理。垂直居中剩下的不是问题，因为在CSS中，只要它在uuuuuuuuuuu中，:hover有时，更改z-indexValue就可以了。在DOM的情况下，后面的元素必然要叠加在前面的元素上，如问题中所述。 而且，如果为每个元素设置一个实现它的方法，感觉不是很理想，不够灵活。因此，我所能想到的就是翻转元素的排列，然后进行遍历。进行更改应该可以。http://jsfiddle.net/b9gtqLb8/ 前额…似乎花了很多时间，因为情况有点多。好吧，让我们看一下较少的内容。http://jsfiddle.net/b9gtqLb8/2/
bVknXF
z-index:hoverz-index
float:right
0投票投下票
bf 回答2年之前
考虑到身高越来越高的情况，王子的伟大思想太受赞扬了。
我们只能考虑这些菜的一般情况……
主题要做的是让计算机自动完成需要手动完成的工作。
无助的CSS不是一种编程语言。
因此，我不得不使用SCSS来完成它。
HTML：
<main>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
SCSS：
$maxz: 0;
@function color($n, $off) {
$m: ($n + $off) % 3;
$q: $n % 6;
@if $q < 3 {
@if $m == 0 {
@return 255;
} @else {
@return 0;
}
} @else {
@if $m < 2 {
@return 255;
} @else {
@return 0;
}
}
}
@mixin zindex($z) {
$maxz: max($z, $maxz);
z-index: $z;
}
@mixin orgeful($n, $count) {
section:nth-child(#{$n}) {
background: rgb(color($n, 0), color($n, 1), color($n, 2));
$off: $n % 5 * 10px;
width: $off + 100px;
height: $off + 100px;
margin-top: (50px-$off / 2);
margin-right: -20px;
@include zindex($count - $i);
}
}
section {
width: 100px;
height: 100px;
background: #f00;
float: left;
position:relative;
}
@for $i from 1 through 6 {
@include orgeful($i, 6);
}
section:hover {
z-index: $maxz;
}
