Material-UI Drawer: How to position drawer in a specific div

Question

I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.

<div className="confirmation-drawer">
   <Drawer
       anchor="top" 
       open={state.top} 
       onClose={toggleDrawer('top', false)}>
      <!-- Drawer content goes here -->
    </Drawer>
</div>

I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.

Answer 1

The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.

If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.

https://material-ui.com/api/accordion/

That will allow you to have a small "drawer"-like element that other components can be hidden inside of.

Answer 2

what @Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.

as i said its merely a workaround but i hope it helps somebody.