Overlay below tiles in Leaflet.js

Question

I have a Leaflet.js map, with a base tile layer, a label tile layer, and some overlays. I need to put the label tile layer ABOVE the overlays. I tried bringing it to front using bringToFront() - for no avail. Here's the code:

map.addLayer( new L.StamenTileLayer("toner-lines") );
...// more code, loading the overlays, etc
var labels = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000
});
labels.addTo(map);
labels.bringToFront();

Answer 1

For those searching nowaday with Leaflet 1.7.x/1.8.x, you can set the pane for the tilelayer.

Default is the tile pane but you can add this parameter pane: 'overlayPane' to add the tilelayer to overlay pane. So the code above would look like this :

var labels = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-labels-en/{z}/{x}/{y}.png', {
    maxZoom: 17,
    zIndex: 1000,
    pane: 'overlayPane'
});