Material UI Fab Button stays under left split-pane

Question

How can I make the Fab button totally visible? Left half of it is always under left pane. Tried to increase z-index, but didn't work.

codesandbox

        <UpperPane>
          <Fab
            style={{
              position: "absolute",
              left: "-25px",
              zIndex: 999
            }}
            color="primary"
            aria-label="add"
          >
            <AddIcon />
          </Fab>
        </UpperPane>        

Answer 1

Modify CSS properties and it will work -

 style={{
          left: "-25px"
       }}

const UpperPane = styled.div`
  height: 100%;
  width: 100%;
  position:fixed; // add this property
  background-color: yellow;
`;

Working sandbox here - https://codesandbox.io/s/splitpane-rqenw?file=/demo.tsx

Answer 2

That's the behaviour I want. Manged to create using mutation observer. If anyone has a better solution, perfectly welcome :)

sandbox