Fixed table header doesn't stay fixed

Question

I have an R markdown file, where I have a scrollable DT table in my HTML output file. I have fixed the header, as I have many rows in my dataset. The problem is, that the header fixes itself on top op a graph under the data table, when i scroll past it. How do I fix it? I have the following css code in the header of my markdown file:

<style>
.main-container {
    max-width: 1800px;
    margin-left: 80px;
    margin-right: 80px;
}
.fixed-header {
  position: sticky;
  top: 0;
  z-index: 1; /* Lavere z-indeks for headeren */
  background-color: white; /* Baggrundsfarve for headeren */
}
.graph {
  position: relative; /* Brug relative position for grafen */
  z-index: 1000; /* Højere z-indeks for grafen */
}
</style>

And then I create the data table with the following R code:

datatable(
  Opdateringer,
  extensions = c('Scroller', 'FixedHeader', 'FixedColumns'),
  options = list(
    scrollX = TRUE,
    scrollY = '600px', 
    fixedHeader = TRUE,
    fixedColumns = list(leftColumns = 3),
    lengthMenu = c(10,-1)  
  )
) %>%
formatRound(
  columns = c(3:8),
  digits = 0,
  mark = ".",
  dec.mark = getOption("OutDec"),
  zero.print = NULL,
  rows = NULL
) %>%
formatRound(
  columns = c(9:12),
  digits = 2,
  mark = ",",
  dec.mark = getOption("OutDec"),
  zero.print = NULL,
  rows = NULL
) %>%
formatStyle(
  columns = 9:12, 
  color = styleInterval(-5, c("red", "#9AAE84"))  
)

Which results in this problem (see picture - this is the header from the table overlapping my graph below it)

I have tried changing some of the values in the datatable such as the pixels, the length of the menu, the z-index, the position in .fixed-header and the top value.. Nothing works, and the changes just change on which graf below the data table the overlapping happens