Кнопка пользовательского интерфейса материала остается под левой разделенной панелью

Question

Как сделать кнопку Fab полностью видимой? Левая половина всегда находится под левой панелью. Пытался увеличить z-index, но не сработало.

codesandbox

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

Answer 1

Измените CSS свойства, и оно будет работать -

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

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

Рабочая песочница здесь - https://codesandbox.io/s/splitpane-rqenw?file= / demo. TSX

Answer 2

Это поведение, которое я хочу. Удалось создать с помощью наблюдателя мутации. Если у кого-то есть лучшее решение, то добро пожаловать:)

песочница