map_folium = folium.Map(location=[0, 0], zoom_start=2)

# Add tile layer
tile = folium.TileLayer(
    tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    attr='Esri',
    name='Esri Satellite',
    overlay=False,
    control=True
).add_to(map_folium)  

# Coordinates and other parameters
leftlon = -79.4
radius = 30
rightlon = -76.05
toplat = 39.72
botlat = 38.2   
states = ['VA', 'MD', 'PA']

# Load cities data
cities = pd.read_csv('uscities.csv')
cities = cities[cities['state_id'].isin(states)]
cities_t1 = cities[cities['ranking'] <= 1]
cities_t2 = cities[cities['population'] >= 40000]

# Load MADIS and METAR data
madis_df = pd.read_csv('madis_data.csv')
metar_df = get_metars('VA')

# Add county borders
geojson_file = 'counties.geojson'
with open(geojson_file) as f:
    geojson_data = json.load(f)
folium.GeoJson(
    geojson_data,
    name='US Counties',
    style_function=lambda feature: {
        'fillColor': 'black',
        'fillOpacity': 0.3,
        'color': 'gray',
        'weight': 2
    }
).add_to(map_folium)

# Add highways
shapefile_path = 'tl_2019_us_primaryroads.shp'
gdf = gpd.read_file(shapefile_path)
gdf = gdf[gdf['RTTYP'] == 'I']
geojson_data = gdf.to_json()
folium.GeoJson(
    geojson_data,
    name='Highways',
    style_function=lambda feature: {
        'color': 'blue',
        'weight': 2,
        'opacity': 0.7
    }
).add_to(map_folium)

# Plot MADIS and METAR data
madis_layer = folium.FeatureGroup(name='Madis')
madis_layer = plot_dataframe_on_map(madis_layer,madis_df, 10, 'pink')
madis_layer.add_to(map_folium)

metar_layer = folium.FeatureGroup(name='ASOS')
metar_layer = plot_dataframe_on_map(metar_layer,metar_df, 20, 'yellow')
metar_layer.add_to(map_folium)


map_folium = plot_radar_on_map(map_folium,38.948655,-77.460075,radius)
# Create a layer for city names
city_layer = folium.FeatureGroup(name='City Names')

def city_plotting(cities, fontsize, city_layer):
    for index, city in cities.iterrows():
        folium.Marker(
            location=[city['lat'], city['lon']],
            icon=folium.DivIcon(
            html=f"""
            <div style="
                font-size: {fontsize}pt;
                color: white;
                text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
                z-index: 1000; /* Ensure city names are on top */
                white-space: nowrap;
                background-color: transparent; /* Background color of the rectangle */
                padding: 2px 5px; /* Space between text and border */
                border-radius: 4px; /* Rounded corners (optional) */
                border: 2px solid transparent; /* Border color and width */
                min-width: 100px; /* Minimum width of the rectangle */
            ">
                {city['city']}
            </div>
            """
            )
        ).add_to(city_layer)
    return city_layer

# Add city names to the layer
city_layer = city_plotting(cities_t1, 12, city_layer)
city_layer = city_plotting(cities_t2, 8, city_layer)

# Add the city layer to the map
city_layer.add_to(map_folium)

# Add layer control to toggle layers
folium.LayerControl().add_to(map_folium)
map_folium.save("map.html") 

I am trying to make sure that my Cities are the top layer (zorder-wise) for my map. When I display the map the pink markers (madis) are infront of the city names in many locations. Based on my code I have the CSS zindex set to 1000 and I added cities layer last to my map.

I tried to ensure that my city layer was the last one added to the map and the zindex in my html/css was the highest in the entire script to ensure it was the top layer with no points over top of it.