如何让Shiny中tmap的按钮、图例等控件置于footer之后？

问题核心是固定定位的Footer层级低于Leaflet自带控件，通过调整CSS属性即可解决：

具体修改方案 #

• 为Footer设置足够高的z-index值，确保它显示在Leaflet控件上方
• 给地图输出容器添加底部内边距，避免地图底部内容被Footer遮挡

修改后的完整代码 #

library(shiny)
library(shinythemes)
library(tmap)
library(sf)

nc <-  st_read(system.file("shape/nc.shp", package="sf"), quiet = TRUE)

ui <- navbarPage(
  "App",

  theme = bslib::bs_theme(bg = "#202123", fg = "#B8BCC2"),

  # 给地图容器添加底部内边距，适配Footer高度
  tabPanel("tab", tmapOutput("map", style = "padding-bottom: 80px;")),

  footer = fluidRow(
    tags$div(
      h4("THIS IS A FOOTER"),
      class = "footer",
      # 添加z-index确保层级高于Leaflet控件
      style = "position:fixed;bottom:0;width:100%;background-color: white;z-index:9999;",
    )
  )
)

server <- function(input, output, session) {

  tmap_mode("view")

  output$map <- renderTmap({
    tm_shape(nc) +
      tm_polygons("AREA")
  })

}

shinyApp(ui, server)

关键修改说明 #

1. Footer的z-index设置：z-index:9999 确保Footer的渲染层级高于Leaflet默认控件（Leaflet控件默认z-index范围多在100-1000之间），让Footer显示在所有地图控件上方。
2. 地图容器的padding-bottom：由于Footer是固定定位（脱离文档流），会直接覆盖地图底部内容，设置padding-bottom:80px（可根据Footer实际高度调整数值），保证地图内容不被遮挡。

内容的提问来源于stack exchange，提问作者ifoxfoot