前端之家

  1. 首页
  2. 问答

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

• 问答

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

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

通过调整每个标记元素的Z索引很容易做到这一点。

标记元素当前在CSS之下具有此元素，它是由Leaflet.js在构建/填充阶段循环生成的：

/* 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， next 标记（无论其在地图上的位置如何）都具有z-index: 59;，等

以下是一个示例差异，其中包含手动编辑的z-index；

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


以上；一些红色的针脚隐藏在蓝色的针脚后面。这些将需要提升为更加可见。

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


以上；通过z-index编辑将红色图钉提升到其他图钉之上，但同时保持彼此堆叠（升序）。。

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

是否有CSS方法（仅）基于其当前值来相对更新z-index值？

例如； “推广”此标记可以是z-index: calc(<current_value> + 200);

但是，我找不到捕获CSS索引当前值的纯CSS方法。大多数“计算”当前值使用100％，但Z-index不使用百分比。

为什么我们不能将其设置为较高的数字？
使用某个任意的较高的总体捕获值将无法获得理想的结果，因为例如将z-index设置为9999意味着所有选定的标记元素都将具有相同的z索引。标记是从数据库数据中输出的，并且以某种方式排序（在这种情况下，是通过 date 进行排序），因此，被“提升”的标记组仍应彼此相对，同时被提升为z-index的附加值，高于其他不在组中的人。

iCMS 回答：CSS Calc根据当前的z-index值设置新的z-index值

一个想法可能是使用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>

,

您在分析的这一部分中错了：

z-index的值是一个标记的计数器，因此该标记是数字58，下一个标记（无论其在地图上的位置如何）都有z-index: 59;，等等。

Leaflet管理标记图标的zIndex，以便更北（向上）的标记zIndex比南（向下）with this bit of code的标记更大，并设置一个稍晚的值应用于图标的ImageHTMLElement的CSS属性：

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

但是Leaflet标记具有zIndexOffset option来控制您面临的问题类型。 L.Marker中还有a setZIndexOffset method个可用以更改此值，例如：

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，假设在顶部/底部显示标记的标准不会随时间变化。

tl; dr版本为：

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

CSS是否有办法（仅）基于当前值相对更新z-index值？

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

csscss-calcleafletz-index
本文链接：https://www.f2er.com/1522668.html

大家都在问