Can someone explain z-index and pseudo-elements in CSS to help me display a child element under its parent?

Question

I want a child element to be displayed under it's parent element but I can't wrap my head around z-index.

The only solution I found is to add a container element and set it's z-index to something while not setting z-index of the parent element at all and setting z-index of a child to -1, but I still don't fully understand how it works. Why is the child displayed under parent, but above container? Please help.

Demo

.button-container {
  display: inline-block;
  border: 1px solid green;
  z-index: 10;
  position: relative;
}

.button {
  padding: 1.2rem 2.5rem;
  background: #cccccc;
  
}

.button:before {
    content: "";
    position: absolute;
    background-color: lightblue;
    top: 10px;
  right: 10px;
    width: 100%;
    height: 100%;
   z-index: -1;
  }