CSS 根据当前 z-index 值计算设置新的 z-index 值

Question

我有一张带有数百个地图标记的传单地图。由于地图拥挤，其中一些地图标记位于其他地图标记下方。

用户希望某些类型或标准的标记出现在地图上标记“堆栈”的顶部。

这很容易通过调整每个标记元素的 Z 索引来完成。

标记元素目前在 CSS 下面有这个，它是由 Leaflet.js 在 construction/population 阶段循环生成的：

/* Constructed by Leaflet 1.7 */
element {
    margin-left: -10px;
    margin-top: -20px;
    width: 25px;
    height: 30px;
    transform: translate3d(551px, 252px, 0px);
    z-index: 58;
    outline: currentcolor none medium;
}

z-index的值是标记的计数器，所以这个标记是58号，而下一个标记，（不管它在地图上的位置）有z-index: 59;，等等

这是一个示例差异，手动编辑了 z-index；

以上；一些红色别针隐藏在蓝色别针后面。这些将需要提升以提高可见度。

以上；红色图钉通过 z-index 编辑提升到其他图钉上方，但也保留它们彼此堆叠（升序）。

但是，由于标记的数量是可变的，因此 z-index 的值也是可变的。我当然可以用 javascript 更新所有这些，我几乎可以肯定必须这样做，但我很好奇是否：

有没有 CSS（仅）根据其当前值相对更新 `z-index` 值的方法？

例如； 'promote' 这个标记可以是 z-index: calc(<current_value> + 200);

但是，我找不到 CSS 唯一的方法来捕获 Z-index 的当前值；大多数“计算”当前值使用 100%，但 Z-index 不使用百分比。

为什么我们不能将它设置为一些大的数字？
使用一些任意高的 catch-all 值不会给出理想的结果，因为例如，将 z-index 设置为 9999 意味着所有选定的标记元素将具有相同的 z-index。标记是从数据库数据中输出并以某种方式排序的（在本例中，按日期），因此“提升”的标记组仍应为相对于彼此，同时在晋升时 z-index 比不在该组的人具有更高的价值。

Answer 1

一个想法可能是使用 translateZ() 以相同的方式提升所有元素，但我看到您已经应用了转换。您或许可以将其应用于另一个包装器。

这里是这个想法的一个例子：

$('.box i').each(function() {
  var z = $(this).index();
  $(this).css('z-index',z);
});

.box{
  padding:20px;
  counter-reset:num;
  transform-style:preserve-3d; /* here */
}
.box i {
  display:inline-block;
  position:relative;
  margin:0 -5px;
  border-radius:50%;
  height:30px;
  width:30px;
  background:blue;
  border:2px solid green;
  color:#fff;
  font-size:25px;
}
.box i::before {
  content:counter(num);
  counter-increment:num;
}
.box i.red {
  background:red;
  transform:translateZ(1px); /* and here */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<i></i><i></i><i></i><i></i><i></i><i class="red"></i><i></i><i></i><i class="red"></i><i></i><i class="red"></i><i></i><i></i><i class="red"></i><i></i><i></i><i class="red"></i><i class="red"></i><i class="red"></i><i></i><i></i><i></i>
</div>

Answer 2

你这部分的分析是错误的：

The value of z-index is a counter of markers, so this marker is number 58, and the next marker, (regardless of its position on the map) has z-index: 59;, etc.

Leaflet 管理标记图标的 zIndex，以便更北（向上）的标记比向南（向下）with this bit of code 的标记具有更大的 zIndex，设置一个值稍后应用于图标的 ImageHTMLElement:

的 CSS 属性

this._zIndex = pos.y + this.options.zIndexOffset;

但是 Leaflet 标记有一个 zIndexOffset option to control the kind of issue you're facing. There's also a setZIndexOffset method 可在 L.Marker 秒内更改此值，例如：

marker1.setZIndexOffset(100);
marker2.setZIndexOffset(0);

假设您在 L.LayerGroup（或 L.FeatureGroup 或 L.GeoJSON）中有标记，您可以利用 its invoke method 来调用所有的 setZIndexOffset同时显示其标记，例如

groupWithRedMarkers.invoke("setZIndexOffset", 100);
groupWithBlueMarkers.invoke("setZIndexOffset", 0);

zIndexOffset 的值应该至少是标记图标的高度（以 CSS 像素为单位），因为 Leaflet 使用屏幕像素坐标来计算最终的 zIndex 值.请记得在需要时将 zIndexOffset 重置为零。

另一种方法是利用 map panes，假设在 top/bottom 上显示标记的标准不会随时间改变。

tl;dr 版本为：

map.createPane('topmarkers');
map.getPane('topmarkers').style.zIndex = 650;
marker = L.Marker(latlng, {pane: 'topmarkers'});

Is there a way with CSS (only) to relatively update the z-index value, based on its current value?

否，因为 Leaflet 在用户平移和缩放地图时动态更改 z-index 标记。

CSS 根据当前 z-index 值计算设置新的 z-index 值

CSS Calc setting a new z-index value based on current z-index value

css

leaflet

z-index

css-calc

有没有 CSS（仅）根据其当前值相对更新 `z-index` 值的方法？

CSS 根据当前 z-index 值计算设置新的 z-index 值

CSS Calc setting a new z-index value based on current z-index value

css

leaflet

z-index

css-calc

有没有 CSS（仅）根据其当前值相对更新 z-index 值的方法？

有没有 CSS（仅）根据其当前值相对更新 `z-index` 值的方法？