CSS / HTML 分层问题

Question

I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.

The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail. Built with React, and the CSS is in the pre-made App.css file.

React // HTML // Javascript

const toggleClasses = classNames('wrg-toggle', {
  'wrg-toggle--checked': toggle,
  'wrg-toggle--disabled': disabled
}, className);
    return(
      <div
      onMouseOver={() => setHoveredElement(5)}
      onMouseLeave={() => setHoveredElement(null)}
    >
     <div onClick={triggerToggle} className={toggleClasses}>
            <div className="wrg-toggle-container">
            <label htmlFor="grid">Enable grid</label>
                <div className="wrg-toggle-check">
                    <span>{ getIcon('checked')}</span>
                </div>
                <div className="wrg-toggle-uncheck">
                    <span>{ getIcon('unchecked')}</span>
                </div>
            </div>
            <div className="wrg-toggle-circle"></div>
            <input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
        </div>
  </div>
    );
};

CSS code

.wrg-toggle {
  touch-action: pan-x;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin-left: 5em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

.wrg-toggle-input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.wrg-toggle-check, .wrg-toggle-uncheck {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  opacity: 0;
}


.wrg-toggle-check {
  z-index: 3;
  left: 8px;
  position: absolute;
  opacity: 0;
  
}
.wrg-toggle-uncheck {
  opacity: 1;
  right: 10px;
  top: 2px;
  position:inherit;
  z-index: 50;
  opacity: 1;
  background-color: white;
  
}
label {
  float: right;
  right: 0.5em;
  width: 8em;
  margin-left: 0px;
  text-align: center;
  margin-right: 20px;
  background-color: #8E9092;
  border-radius: 30px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0 ; 
  height: 24px;
  border: solid 1px;
  top: -1.3px;
  position: relative;
  z-index: 0;
}

.wrg-toggle-uncheck span, 
.wrg-toggle-check span {
  align-items: center;
  display: flex;
  height: 10px;
  justify-content: center;
  position: relative;
  width: 10px;
}

.wrg-toggle-container{
  width: 50px;
  height: 24px;
  padding: 0;
  left: 10em;
  border-radius: 30px;
  background-color: #f5f6f8;
  transition: all .2s ease;
  border: solid 1px;
  z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
  width: 50px;
  height: 24px;
  left: -0.3px;
  border-radius: 30px;
  background-color:#61dafb;
  border: solid 1px;
  top: 0px;
}

.wrg-toggle-circle{
  transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
  position: absolute;
  top: 3px;
  left: 1px;
  width: 22px;
  height: 21px;
  border: 1px solid #4d4d4d;
  border-radius: 50%;
  background-color: #fafafa;
  box-sizing: border-box;
  z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
  opacity: 1;
  position:relative;
  border-top: 2px;
  border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
  opacity: 0;
  border: 0;
  
}
.wrg-toggle--checked .wrg-toggle-circle {
  left: 27px;
} 
.wrg-toggle--checked .wrg-toggle-circle:after {
  content: "✔";
  color: green;
}

Answer 1

Solved!

added a

.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute; 
z-index: 1; 
}