marker-shaped icon breaks z-index
nnseva opened this issue · comments
When the icon is marker-shaped it breaks the z-index style attribute which is ignored by the marker.
The reason is that the wrapperDiv built around a marker in the following piece of your code has no position style attribute, so the z-index is ignored as described in the html documentation.
// having a marker requires an extra parent div for rotation correction
if (this.options.iconShape === 'marker') {
var wrapperDiv = document.createElement('div');
wrapperDiv.appendChild(iconDiv);
return wrapperDiv;
}See here the example. The top 2 markers are circle-shaped and z-index works. The next 2 markers are marker-shaped and z-index is not working.
The recommended fix is to setup position style attribute to the absolute value, either directly, or by the special class.
you can set position by using iconStyle, or innerIconStyle option.
Sorry @marslan390, but neither iconStyle, nor innerIconStyle is applied to the icon wrapper div when the iconShape option is 'marker'.
When the iconShape is 'marker', the iconStyle option is applied to the immediate children of the icon wrapper div, and innerIconShape is applied to the children div ot the icon wrapper immediate children.
You can play with iconShape and innerIconShape here to be sure. No one option is applied to the icon wrapper div. It always stay free of additional styles except leaflet own styles assigned for all icon markers.
This situation is unique for the only 'marker' iconShape option. Icons having other shapes don't have an icon wrapper div as the 'marker' does (because of the code citated in the issue). It is a reason why they behave slightly different and particularly, accept z-index as expected.
Alright, Thank you. I understand that. Could you please review the comment on the pull request I just added?
@nnseva your pull request has been merged to master, so I am closing this issue. Thanks