HeatmapWithTime is visualized in the back of overlay image

HeatMapWithTime is visualized in the back of the overlay image, even after including <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html.

According to https://github.com/python-visualization/folium/issues/1201, including this <style>.leaflet-heatmap-layer{z-index:300 !important}</style> in my html should bring the Heatmap to the front. However, that did not work.

My map looks like this:

Basemap

m = folium.Map([35, 41], tiles='stamentoner', zoom_start=6)

Land Use Changes

folium.raster_layers.ImageOverlay(
image=dataimage,
bounds=[[ymin, xmin], [ymax, xmax]],
colormap = lambda x: (x, x, x),
name= 'MODIS Transitions 2009 vs. 2017',
opacity=.8,
zindex=1,
overlay=False,
mercator_project=True).add_to(m)

UCDP HeatMap

hm = HeatMapWithTime(data=list(data.values()), # coordinates
index=list(data.keys()), # years
name = 'UCDP events',
radius=10,
auto_play=False,
max_opacity=1).add_to(m)

folium.LayerControl().add_to(m)
m.save('html/index.html')

My html header is attached:
index.txt

Bắt đầu bằng cách xem lại index.txt đính kèm và tái tạo bản đồ bằng ví dụ HeatMapWithTime và ImageOverlay trong issue. Theo dõi cách các layer đó được render và sắp xếp trong html đã lưu, sau đó xác minh rằng heatmap xuất hiện phía trước overlay trong khi LayerControl và thiết lập bản đồ hiện có vẫn hoạt động.