I've gotten custom HTML applied successfully within my #map element (where Leaflet is appended) but I'm having unusual behavior with other Leaflet objects that find themselves within the transparent portion of my div.
However, were I to click anywhere on that popup or its map marker, the click is propagating all the way through to the map, rather than stopping at the popup/marker. It's as though the inherent stopPropagation functionality on those objects is somehow nullified by being under my custom div. My cursor, too, has the grab-hand associated with moving the map, whereas it should be a default pointer when on those objects.
If I scroll the map so those objects are outside my div (outside the blue) then my clicks stop at them correctly.
I'm not sure if it's relevant but the top and left portions of the custom div do have stopPropagation applied to them, which also works as intended. But again, their parent element (the whole blue area) does not.
P.S. I should also point out that due to some dynamic scaling logic for resizing, there's no way to get rid of the parent element without a considerable and complex workaround, which we'd prefer to avoid. Otherwise I'd have done that already to bypass the problem.