Overlaying megamenu above other panels of splitter in primevue

Question

I am new to vuejs & primevue. Trying to overlay megamenu panel above the other panels of splitter. But megamenu panel keeps hiding behind other panels. (Ref image) I wanted it to appear at the top of Main Area ( other panel )

App.vue

<template>
  <Splitter style="height: 100vh" layout="vertical" :gutterSize="2">    

      <SplitterPanel class="flex align-items-center justify-content-center" :size="5" :minSize="5">
          <MegaMenu :model="items"/>
      </SplitterPanel>

      <SplitterPanel class="flex align-items-center justify-content-center" :size="95"> 
            MAIN PANEL
      </SplitterPanel>

  </Splitter>
</template>

<script>
export default {
  name: 'App',  
  data() {
        return {
          items: [
            { label: "ITEM1" },
            { 
              label: "ITEM2",
              items: [
                [
                  { label: 'SUB ITEM1' },
                  { label: 'SUB ITEM2' },
                  { label: 'SUB ITEM3' }
                ]
              ]
            },
            { label: "ITEM2" }
          ]      
        };
    },
}
</script>