How can i put the tag infront of the tag

Question

I wanted to do some UI-Design and came across a little problem. Basically the tag should be the background of that

tag -which is only red so that it can be found more easily-.

screenshot

HTML-Code:

<div class="tournament">
        <p>
            &lt;GET system.template.tournament.date&gt; <progress id="value" max="8"></progress>
        </p>
        <button>Information</button>
    </div>
    <p class="playerNumber">
        <span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
    </p>

CSS-Code:

.tournament {
  background-color: #202020;
  width: 98%;
  margin-left: 1%;
  margin-top: 15px;
  height: 121px;
}

.tournament p {
  text-align: left;
  position: absolute;
  margin-top: 48px;
  margin-left: 20px;
}

.tournament button {
  margin-left: 90%;
  margin-top: 43px;
  border-radius: 100px;
  width: 135px;
  height: 35px;
  border-color: #666666;
}

.tournament progress {
  border-color: #666666;
  background-color: #202020;
  width: 285%;
  height: 45px;
  position: absolute;
  margin-top: -10px;
  margin-left: 80%;
}

progress::-moz-progress-bar { background: #151515; }
progress::-webkit-progress-value { background: #151515; }
progress { color: #151515; }

.playerNumber {
  text-align: left;
  color: red;
  margin-left: 30%;
  margin-top: -50px;
  z-index: 200;
}

Basically that p-element shows some information related to that progressbar. In this case it says "4/8 Players in" which is refered to the tournament. Thats why the progressbar is 50%-full.

Its not a problem if you have a solution that comes without a

-tag but allowes me to write something on the progressbar.

Why am i asking here?

1. z-index didnt solve my problem as you can see in the code
2. I didnt found an answer to my problem on this forum
3. Google had no clue either

Answer 1

you need to put the .playerNumber element inside the .tournament element.

just adjust the positions using, top, left css props for .playerNumber element...

then you would need this css and...

.playerNumber {
  text-align: left;
  color: red;
  left: 300px;
  top: 10px;
  z-index: 3;
  display:block;
}


.tournament progress {
  border-color: #666666;
  background-color: #202020;
  width: 285%;
  height: 45px;
  position: absolute;
  margin-top: -10px;
  margin-left: 0px;
  z-index: 2;
}

...and html like this

<div class="tournament">
  <p>
    &lt;GET system.template.tournament.date&gt; <progress id="value" max="8"></progress>
  </p>
  <button>Information</button>
  
<p class="playerNumber">
  <span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>
</div>

test here