Leafletでマーカーごとにz-indexを適用したい

###前提・実現したいこと
leafletでマーカーをいくつかの種類に分け、それぞれの表示される階層を変えたいです
（A, B, CがあってAを一番上、その下にB、Cを配置したいです）

###発生している問題・エラーメッセージ
マップのデフォルト通りに南に位置するマーカーが上に表示されます

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	
5	<title>Custom Icons Tutorial - Leaflet</title>
6
7	<meta charset="utf-8" />
8	<meta name="viewport" content="width=device-width, initial-scale=1.0">
9	
10	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
11
12	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
13	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
14
15
16	<style>
17		#map {
18			width: 600px;
19			height: 400px;
20		}
21	</style>
22
23	
24</head>
25<body>
26
27<div id='map'></div>
28
29<script>
30	var map = L.map('map').setView([51.5, -0.09], 13);
31
32	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
33		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
34	}).addTo(map);
35
36	var LeafIcon = L.Icon.extend({
37		options: {
38			iconSize:     [38, 95],
39			iconAnchor:   [22, 94],
40			popupAnchor:  [-3, -76]
41		}
42	});
43
44	var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png', ZIndexOffset: 3}),
45		redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png', ZIndexOffset: 2}),
46		orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png', ZIndexOffset: 1});
47
48	L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
49	L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
50	L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
51
52</script>
53
54</body>
55</html>

###試したこと
英語でも検索しましたが、z-indexの適用例がマーカーが１つのみの事例で、
Leaflet公式（http://leafletjs.com/examples/custom-icons/）のような
複数ある例については力不足かもしれませんが見つかりませんでした。
ZIndexOffsetを適用する場所が違うのではないかとは思いますがわかりません…
どなたかご教授のほどよろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
leaflet v0.7.7

行動規範の内容に同意します

回答2件

ベストアンサー

JSでz-indexが振られているようなのでJSでやったほうが実用的かと思いますが、とりあえず思いついたものを出しておきます。

css
1.leaflet-marker-pane .leaflet-marker-icon:nth-child(1) {
2	z-index: 300 !important;
3}
4.leaflet-marker-pane .leaflet-marker-icon:nth-child(2) {
5	z-index: 350 !important;
6}
7.leaflet-marker-pane .leaflet-marker-icon:nth-child(3) {
8	z-index: 400 !important;
9}