Shiny应用顶部固定区域被Datatable遮挡的解决方法问询

问题核心是固定定位的顶部组件层级低于DataTable默认渲染的层级，导致滚动时被遮挡，调整固定元素的层级属性即可解决，同时可以优化代码结构避免冗余占位标签。

修改要点 #

• 给固定定位的顶部div的样式属性添加z-index: 999，确保顶部层级高于页面其他所有元素
• 给顶部div添加白色背景样式，避免下方表格内容透过透明的顶部区域显示，视觉效果更统一
• 移除大量重复的<br>占位标签，改为给DataTable外层容器添加上内边距，预留顶部高度，避免表格初始内容被顶部遮挡

完整可运行代码 #

library(shiny)
library(DT)
ui <- shinyUI(fluidPage(
  titlePanel(fluidRow(
    div(column(12, align="center",
           selectInput("rmd1", "RMDw", choices = c(1,2)),
           selectInput("rmd2", "RMD2", choices = c(1,2))
    ), style = "position:fixed; width:inherit; z-index: 999; background-color: #ffffff;")
  )),
  # 预留顶部区域占位
  div(style = "padding-top: 100px;",
      dataTableOutput("uioutput", height = "2000px")
  )
))

server <- function(input, output, session) {
  output$uioutput <- renderDataTable({
    datatable(iris)
  })
}

shinyApp(ui, server)

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