How to insert one div on top of the other?

Question

I’m trying to insert a div with the name on top of the main one, I’m creating a goal monitoring panel, where the channel comes in the header and the percentage will be the center, as example of the photo, but when running my code, the same is not working, as code in example, it may be some detail that is going unnoticed.

---

html,
body {
  width: 100%;
  height: 100%;
  margin-left: -50;
  padding: 0;
}

.jumbo {
  background-image: url(https://unsplash.it/600/300);
  background-size: cover;
}

.container {
  width: 60%;
  margin: 0px 160px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-wrap: wrap;
  padding-top: 1rem;
}

.box {
  width: calc(50% - 2rem);
  height: 10rem;
  margin: 1.0em 1em;
  box-sizing: border-box;
  display: flex;
}

.p1,
.p2,
.p3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #ffffff;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  background-color: white;
}

.p1 {
  flex-grow: 1;
  background-color: cyan;
  position: right;
}

.

<div class="jumbo">
  <div class="container">
    <div class="box">
      <div class="p1">
        100%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>


  </div>
</div>[![Exemplo como o Painel deve ficar][1]][1]

Answer 1

In your case I suggest position:absolute same, it will be like in the example

html,
body {
  width: 100%;
  height: 100%;
  margin-left: -50;
  padding: 0;
}

.jumbo {
  background-image: url(https://unsplash.it/600/300);
  background-size: cover;
}

.container {
  width: 60%;
  margin: 0px 160px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-wrap: wrap;
  padding-top: 1rem;
}

.box {
  width: calc(50% - 2rem);
  height: 10rem;
  margin: 1.0em 1em;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

.p1,
.p2,
.p3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #ffffff;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  background-color: white;
}

.p1 {
  flex-grow: 1;
  background-color: cyan;
  position: right;
}

.p2 {
position: absolute;
right: 0;
left: 0;
top: 0;
height: 40px;
}

<div class="jumbo">
  <div class="container">
    <div class="box">
      <div class="p1">
        100%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>
    <div class="box">
      <div class="p1">
        SAMSUNG
      </div>
      <div class="p2">
        50%
      </div>
    </div>


  </div>
</div>