How to set one div to be always on top of another div

Question

I am a beginner in CSS and HTML. This is what I am trying to achieve, a progress bar with text label on top of the progress. The position of the texts are fixed, the name is always on the leftmost part while the unit is always on the rightmost. I need multiple duplicates of this progress bar.

I was able to achieve the correct layout with only one copy.

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
  </div>
</div>

However, If I duplicate a copy of the group of divs, the result became this.

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 14px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Humidity</div>
      <div class="stats-unit">50</div>
    </div>
  </div>
</div>

So, I have to change the top value of the style of the texts to around 48px to get the correct result. But isn't a good solution because the number of progress bar that I am going to display is dynamic.

I don't understand why the x and y position of the second copy of the texts the same with the first copy? I mean they belong to different parent div. I thought absolute positioning will be with respect to its parent div only. What is the correct way to achieve this?

Nebulosar · Accepted Answer · 2021-07-27T07:49:44.793

What you need is to make the text behave RELATIVE to your .stats-progress-container.

You do that by adding the position: relative to that container div.
The ABSOLUTE position value of your .stats-label label will look to the first parent (if any) with the RELATIVE position

And then, you can tweak the text to be centered to that div again, but I think you can figure that one out on your own. (I tweaked it in the snippet, it has to do with the top attribute)

For more info on position relative, see w3Schools

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  position: relative; /* YOUR FIX */
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 6px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 6px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Humidity</div>
      <div class="stats-unit">50</div>
    </div>
  </div>
</div>

score 1 · Answer 2 · 2021-07-27T07:51:26.290

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  position: absolute;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
  position: relative;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
position: absolute;
    z-index: 1;
    font-size: 12px;
    left: 16px;
    color: #606060;
    background-color: transparent;
    top: 50%;
    transform: translateY(-50%);
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 50%;
    transform: translateY(-50%);
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
  <div class="stats-display-container">
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Temperature</div>
      <div class="stats-unit">80°C</div>
    </div>
    <div class="stats-progress-container">
      <div class="stats-progress"></div>
      <div class="stats-label">Humidity</div>
      <div class="stats-unit">50</div>
    </div>
  </div>
</div>

That ok

You added top twice to your label div, that is not very nice :) Like the way you handled it though — Nebulosar, Jul 27 '21 at 07:48
It is alright I guess, I just point it out to sharpen your "neat" skills. — Nebulosar, Jul 27 '21 at 09:04

score 1 · Answer 3 · answered Jul 27 '21 at 07:48

You didn't apply Position Relative to the container.

The best solution to this kind of position problem is to put them in a div.stats-progress-container(position relative) and then apply the position absolute. and then you can use top right bottom left.

.container {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}

.stats-display-container {
  right: 0;
  margin-top: 50px;
  margin-right: 50px;
  background-color: #86fffb1f;
}

.stats-progress-container {
  position: relative;
  display: block;
  margin: 12px;
  width: 200px;
  height: 20px;
  background-color: #00586199;
}

.stats-progress {
  width: 40%;
  height: 100%;
  background-color: #03d5ff;
}

.stats-label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 5px;
  left: 16px;
  color: #606060;
  background-color: transparent;
}

.stats-unit {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  top: 5px;
  right: 16px;
  color: white;
  background-color: transparent;
}

<div class="container" id="view_container">
    <div class="stats-display-container">
        <div class="stats-progress-container">
            <div class="stats-progress"></div>
            <div class="stats-label">Temperature</div>
            <div class="stats-unit">80°C</div>
        </div>
        <div class="stats-progress-container">
            <div class="stats-progress"></div>
            <div class="stats-label">Humidity</div>
            <div class="stats-unit">50</div>
        </div>
    </div>
</div>

score 0 · Answer 4 · answered Jul 27 '21 at 07:38

0

Add position: relative; to .stats-progress-container. This will make absolute position be relative to that element.

answered Jul 27 '21 at 07:38

Chrillewoodz

27,055
21
92
175

How to set one div to be always on top of another div

4 Answers4