Is there a way to show a div element first without using a z-index?

Question

I have a button with a "position" value of "relative" and to create a modal I need to hold a div element at the top of the page and its "position" value needs to be "fixed". The button's "z-index" value is "1" and the modal div's "z-index" value is "10" but the div stays below the button, where and how should I fix the problem. How can I keep an item other than Z-index at the top?

I changed and saw the "position" properties of the div, but I didn't get any expectation. Picture and codes of the page:
image

/*Modal*/
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #0000009b;
  z-index: 10;
}

/*Button*/
.btn {
  position: relative;
  display: block;
  font-family: sans-serif;
  max-width: 400px;
  margin: 25px auto;
  font-size: 16px;
  padding: 10px 30px;
  border: none;
  cursor: pointer;
  background: none;
  color: #ffffff;
  font-weight: bold;
  z-index: 1;

.btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 13px;
  backdrop-filter: blur(10px);
  background-color: #0000009e;
  z-index: -1;
  transition: .2s ease;
}

.btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 5px;
  background: conic-gradient(from 200deg,
      #0007cb 0deg,
      #2fc1fb 60deg,
      #cb0ea2 120deg,
      #e10707 180deg,
      #eb5223 240deg,
      #630cd5 300deg,
      #040acb 360deg);
  z-index: -1;
}