即使 z-index 为 9999，react 元素也会被隐藏

Question

I am working on a jsfiddle react sidebar project, and have it so the sidebar can expand/collapse dynamically based on how much screen size you have. I want the button for sidebar expand/collapse to always be visible though, so I added it to my sidebar and gave the element a left:xxxpx attribute, but the "CLICKME," button to expand/collapse the sidebar is always hidden under the main content, even after I've added z-index:99999!important to try and make sure the button is always visible

in css my element has these attributes:

/* Style the `label` that we use to target the `.sidebar-checkbox` */
.sidebar-toggle {
    left:230px;
    z-index:999999!important;
    
  position: absolute;
  top: 1rem;
  display: block;
  padding: 0.5rem 0.65rem;
  color: #505050;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

But the button remains partially hidden under the main content, is there any way I can make this "CLICKME?" button always on top of the main content?

https://jsfiddle.net/martinradio/04tryqwk/14/

Answer 1

.sidebar-toggle {    
  position: absolute;
  right: 1rem;
  display: block;
  padding: 0.5rem 0.65rem;
  color: #505050;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

Above css takes care of the partially hidden issue.