代码之家 › 专栏 › 技术社区 › Martin Asuquo12

CSS Calc根据当前z索引值设置新的z索引值

css-calc z-index leaflet css

Martin Asuquo12 · 技术社区 · 4 年前

我有一张有上百个地图标记的单张地图。由于地图拥挤,有些地图标记位于其他标记的下方。

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

/* 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索引编辑提升到其他管脚之上,但也保持彼此堆叠(升序) .

z-index 也是可变的。当然,我可以用javascript更新所有这些,而且我几乎肯定必须这样做,但是我很好奇:

是否有一种方法可以使用CSS(only)来相对更新价值,基于其当前价值?

例如,要“提升”此标记可以是 z-index: calc(<current_value> + 200);

使用某个任意的高catch-all值不会产生理想的结果,因为例如,设置 z-指数 到 9999 表示所有选定的标记元素将具有相同的z索引。标记是从数据库数据中输出的,并以特定的方式排序(在本例中,按日期 ),因此“提升”的标记组仍应 相对的 ,同时被提升为 z-指数

0 回复 | 直到 4 年前

IvanSanchez 4 年前

你的这部分分析是错的:

z-index: 59; 等等。

zIndex 标记图标,使标记进一步向北(向上)具有更大的 辛德克斯 比南方的(向下的), with this bit of code ImageHTMLElement :

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

但是传单标记有一个 zIndexOffset option a setZIndexOffset method 提供于 L.Marker s更改此值,例如:

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

L.LayerGroup (或 L.FeatureGroup 或 L.GeoJSON ),你可以利用 its invoke method 打电话同时在所有的标记上,例如。

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

锌偏移量 辛德克斯 价值观。记住重置必要时,s调零。

另一种方法是利用 map panes

太长了,读不下去了。

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

不,因为sleal在用户平移和缩放地图时会动态地改变标记的z索引。

Temani Afif 4 年前

一个想法是 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>

CSS Calc根据当前z索引值设置新的z索引值

是否有一种方法可以使用CSS(only)来相对更新 价值,基于其当前价值?

是否有一种方法可以使用CSS(only)来相对更新价值,基于其当前价值?