如何解决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;
以上;一些红色的针脚隐藏在蓝色的针脚后面。这些将需要提升为更加可见。
以上;通过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
的附加值,高于其他不在组中的人。
解决方法
一个想法可能是使用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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。