How to get CSS flex and relative + absolute to work together

user358041
December 30, 2023
273 views
6 votes
6 Answers

I am trying to accomplish the below mockup using CSS. I am close, as shown in the code snippet. But the following tweaks are made and when I try to make them, things go awry.

labels are not showing
dividers need to be inside the thermometer
the "36" and pointer needs to be moved over to match progress bar
Reverse coloring. mix-blend-mode: difference; may work, but gives a weird beige instead of black or white.

<html lang="en">

<head>
  <style>
    body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
    }

    #actual {
      font-size: 40px;
      color: white;
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: 40px;
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      float: left;
      overflow: hidden;
    }

    #progress {
      height: 100%;
      background: white;
      z-index: 333;
      /* border-radius: 5px; */
    }

    .marker {
      border-right: 2px solid white;
      text-align: right;
      padding: 2px;
      float: left;
      margin: 0;
      color: white;
    }

    .labelRow {
      display: flex;
      flex-direction: row;
    }

    .label {
      text-align: center;
      padding: 2px;
      margin: 0;
      color: rgb(255, 255, 255);
      mix-blend-mode: difference;

      @media only screen and (max-width : 640px) {
        width: 50%;
        text-align: center;
      }
    }

    .text {
      display: block;
      font-weight: bold;

    }

    #pointer {
      border-bottom: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: top;
      width: 0;
      transform: rotate(180deg);
    }
  </style>
</head>

<body>
    <div id="actual" style="left: 36%">36</div>
    <div id="pointer" style="left: 36%"></div>
    <div id="thermometer">
      <div id="progress" style="width: 36%;">
      </div>
      <div id="labelRow">
        <div class="label" style="flex: 1;">
          <span class="text">None</span>
        </div>
        <div class="label" style="flex: 1;">
          <span class="text">Low</span>
        </div>
        <div class="label" style="flex: 1;">
          <span class="text">Medium</span>
        </div>
        <div class="label" style="flex: 1;">
          <span class="text">High</span>
        </div>
      </div>
    </div>
    <div id="rangeDisplay">
      <div class="marker" style="width: 25%;">
        <span class="text">25</span>
      </div>
      <div class="marker" style="width: 25%;">
        <span class="text">50</span>
      </div>
      <div class="marker" style="width: 25%;">
        <span class="text">75</span>
      </div>
      <div class="marker" style="width: 25%;">
        <span class="text">100</span>
      </div>
    </div>
</body>

</html>

Tags: css flexbox

Answers

By adding sample labels, placing dividers within the thermometer, adjusting the positioning of "36" and the pointer to align with the progress bar, and updating the mix-blend-mode and colors for better visibility with a clear contrast.

<!DOCTYPE html>
<html lang="en">

<head>
<style>
body * {
  box-sizing: border-box;
}

body {
  background-color: blue;
}

#actual {
  position: relative;
  font-size: 40px;
  color: white;
  left: 36%; /* Adjust positioning */
  margin-top: -20px; /* To align with progress bar */
}

#thermometer {
  position: relative;
  border: 4px solid grey;
  width: 100%;
  height: 40px;
  background: darkblue;
  border-radius: 50vh 50vh 50vh 50vh;
  overflow: hidden;
  margin-top: 20px; /* Create space between progress bar and labels */
}

#progress {
  position: absolute;
  height: 100%;
  background: white;
  z-index: 333;
  width: 36%; /* Adjust initial progress width */
}

.divider {
  height: 100%;
  border-right: 1px solid white; /* Adjust divider styling */
  position: absolute;
}

.labelRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Arrange labels evenly */
  padding: 0 4%; /* Adjust padding for better alignment */
  color: white;
}

.label {
  text-align: center;
  margin: 0;
  color: white;
}

.text {
  display: block;
  font-weight: bold;
}

#pointer {
  position: relative;
  border-bottom: 10px solid white;
  border-left: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
  transform: rotate(180deg);
  left: 36%; /* Adjust positioning */
  margin-top: -5px; /* To align with progress bar */
}
 </style>
 </head>

 <body>
 <div id="actual">36</div>
 <div id="pointer"></div>
 <div id="thermometer">
  <div id="progress"></div>
  <div class="divider" style="left: 12.5%;"></div> <!-- Adjust left position 
  for dividers -->
  <div class="divider" style="left: 25%;"></div>
  <div class="divider" style="left: 37.5%;"></div>
  <div class="divider" style="left: 50%;"></div>
  <div class="divider" style="left: 62.5%;"></div>
  <div class="divider" style="left: 75%;"></div>
  <div class="labelRow">
  <span class="label">0</span>
  <span class="label">20</span>
  <span class="label">40</span>
  <span class="label">60</span>
  <span class="label">80</span>
  <span class="label">100</span>
</div>

Labels are not displaying because the CSS classes were not appropriately targeted.
Dividers need to be inside the thermometer, so I moved the .marker elements inside the #progress div.
Moved the "36" and pointer to match the progress bar.
Changed the coloring to reverse using a different approach instead of
mix-blend-mode.

Here’s the updated code:

const progressBar = document.getElementById('progress');
progressBar.style.width = '36%';

  body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
      font-family: Arial, sans-serif;
      margin: 0;
    }

    #actual {
      font-size: 40px;
      color: white;
      position: relative;
      left: 36%;
      margin-top: 10px;
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: 40px;
      background: darkblue;
      border-radius: 50vh;
      overflow: hidden;
      position: relative;
      margin-top: 20px;
    }

    #progress {
      height: 100%;
      background: white;
      width: 36%;
      position: relative;
      z-index: 1;
      transition: width 0.5s ease-in-out;
      border-radius: 50vh;
    }

    .labelRow {
      display: flex;
      justify-content: space-between;
      color: white;
      position: relative;
      z-index: 2;
      margin-top: -1.5em;
    }

    .label {
      flex: 1;
      text-align: center;
      padding: 2px;
      color: white; /* Set the label color */
    }

    .label:first-child .text { /* Target the first label and adjust its color */
      color: darkblue;
    }

    .text {
      font-weight: bold;
      color: white; /* Default color for labels */
    }

    .marker {
      border-right: 2px solid white;
      text-align: center;
      color: black; /* Set marker color */
      position: absolute;
      top: 0;
      height: 100%;
    }

    .marker:nth-child(1) {
      left: 25%;
      color: white; /* Adjust marker color for visibility */
    }

    .marker:nth-child(2) {
      left: 50%;
    }

    .marker:nth-child(3) {
      left: 75%;
    }

    .marker:nth-child(4) {
      left: 100%;
      border: none;
    }

    #pointer {
      position: absolute;
      border-bottom: 10px solid white;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      content: "";
      height: 0;
      width: 0;
      transform: translateX(-50%) translateY(-100%);
      left: 36%;
      bottom: -10px;
    }

    <!DOCTYPE html>
    <html lang="en">

    <head>
    </head>

    <body>
      <div id="actual">36</div>
  <div id="thermometer">
    <div id="progress"></div>
    <div class="labelRow">
      <div class="label"><span class="text">None</span></div>
      <div class="label"><span class="text">Low</span></div>
      <div class="label"><span class="text">Medium</span></div>
      <div class="label"><span class="text">High</span></div>
    </div>
    <div id="rangeDisplay">
      <div class="marker"><span class="text" >25</span></div>
      <div class="marker"><span class="text">50</span></div>
      <div class="marker"><span class="text">75</span></div>
      <div class="marker"><span class="text">100</span></div>
    </div>
    <div id="pointer"></div>
  </div>

    </body>

    </html>

Hi run the below code snippet I hope this will solve your issue.
I have changed the z-index property and some text aligning.

<html lang="en">
    
    <head>
      <style>
        body * {
          box-sizing: border-box;
        }
    
        body {
          background-color: blue;
        }
    
        #actual {
          font-size: 24px;
          color: white;
          position: absolute;
          left: 36.5%;
          top: 34%; /* Adjust the top position as needed */
          transform: translate(-50%, -50%);
        }
    
        #thermometer {
          border: 4px solid grey;
          width: 100%;
          height: 40px;
          background: darkblue;
          border-radius: 50vh;
          overflow: hidden;
          position: relative;
        }
    
        #progress {
          height: 100%;
          background: white;
          width: 36%; /* Adjust the width as needed */
          position: absolute;
          z-index: 1; /* Ensure the progress bar is above markers */
        }
    
        .marker {
          border-right: 2px solid black;
          text-align: right;
          padding: 2px;
          float: left;
          margin: 0;
          color: white;
          position: absolute;
          height: 100%;
          z-index: 2; /* Ensure markers are above progress bar */
        }
    
        .markerText {
          text-align: center;
          padding: 2px;
          float: left;
          margin: 0;
          bottom: 0px; /* Adjust the bottom position as needed */
          color: red;
          position: absolute;
          top: 20%;
        }
    
        .labelRow {
          display: flex;
          flex-direction: row;
          position: absolute;
          width: 100%;
          top: 50%; /* Adjust the top position as needed */
          transform: translateY(-50%);
        }
    
        .label {
          text-align: center;
          padding: 2px;
          margin: 0;
          color: black;
          position: relative;
          width: 25%;
        }
    
        .text {
          display: block;
          font-weight: bold;
        }
    
        #pointer {
          border-bottom: 10px solid black;
          border-left: 6px solid rgba(0, 0, 0, 0);
          border-right: 6px solid rgba(0, 0, 0, 0);
          content: "";
          display: inline-block;
          height: 0;
          vertical-align: top;
          width: 0;
          transform: rotate(180deg);
          position: absolute;
          left: 36%;
          top: 50px; /* Adjust the top position as needed */
        }
      </style>
    </head>
    
    <body>
      <div id="actual">35</div>
      <div id="pointer"></div>
      <div id="thermometer">
        <div id="progress"></div>
        <div class="marker" style="left:-0.4%;">
          <div class="markerText">0</div>
        </div>
        <div class="marker" style="left: 25%; ">
          <div class="markerText">25</div>
        </div>
        <div class="marker" style="left: 50%;">
          <div class="markerText">50</div>
        </div>
        <div class="marker" style="left:75%">
          <div class="markerText">75</div>
        </div>
        <div class="marker" style="width: 100%;left:99%">
          <div class="markerText">100</div>
        </div>
        <div class="labelRow">
          <div class="label">
            <span class="text">None</span>
          </div>
          <div class="label">
            <span class="text">Low</span>
          </div>
          <div class="label">
            <span class="text">Medium</span>
          </div>
          <div class="label">
            <span class="text">High</span>
          </div>
        </div>
      </div>
    </body>
    
    </html>

- AakashGujar
- December 29, 2023 at 7:09 am
- 0 votes
0
Your labels are not displaying because you are not rendering them into your Html
Add a div element with the class labelRow after the thermometer div.
Inside it, add 4 div elements with the class label and the text 0, 25, 50, and 100.
Which will create a row of labels below the thermometer.
And use flex property to align labels evenly.

Login or Signup to reply.

Made some modification to code. Just copy and paste this…….

<html lang="en">

<head>
  <style>
    :root {
      /* change progress width and see the result. remember #acutal text needs to be changed using javascript. for now you can change manually*/
      --progressWidth: 36%;
      --progressHeight: 40px;
    }

    body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
    }

    #actual {
      font-size: 30px;
      color: white;
    }

    #thermometerContainer {
      /* Give the width of thermometer as your wish*/
      width: 90%;
      /* place thermometer at center to see clearly. you can remove it if you wish*/
      margin: auto;
      position: relative;
      padding: 3rem 0;
    }

    #pointerContainer {
      position: absolute;
      top: 0;
      left: var(--progressWidth);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: var(--progressHeight);
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      /* overflow: hidden; */
    }

    #progress {
      width: var(--progressWidth);
      height: 100%;
      background: white;
      z-index: 333;
      border-radius: 15px 0 0 15px;
    }

    #rangeDisplay {
      width: 100%;
      position: relative;
      left: 0;
      bottom: 0;
    }

    .marker {
      position: absolute;
      top: 2px;
      color: white;
      transform: translateX(-50%);
    }

    #labelRow {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      mix-blend-mode: difference;
    }

    .label {
      position: relative;
      flex: 1;
      text-align: center;
      padding: 2px;
      margin: 0;
      z-index: 2;

      @media only screen and (max-width : 640px) {
        width: 50%;
        text-align: center;
      }
    }

    /* for displaying | (marker line) */
    .label:not(:last-child)::before {
      content: "";
      width: 2px;
      height: calc(var(--progressHeight) - 8px);
      background-color: white;
      position: absolute;
      left: calc(100% - 4px);
      top: -5px;
    }

    .label .text {
      display: block;
      color: white;
    }

    .text {
      display: block;
      font-weight: bold;
    }

    #pointer {
      border-bottom: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: top;
      width: 0;
      transform: rotate(180deg);
    }
  </style>
</head>

<body>
  <div id="thermometerContainer">
    <div id="thermometer">
      <div id="pointerContainer">
        <div id="actual">36</div>
        <div id="pointer"></div>
      </div>
      <div id="progress">
        <div id="labelRow">
          <div class="label">
            <span class="text">None</span>
          </div>
          <div class="label">
            <span class="text">Low</span>
          </div>
          <div class="label">
            <span class="text">Medium</span>
          </div>
          <div class="label">
            <span class="text">High</span>
          </div>
        </div>
      </div>
    </div>
    <div id="rangeDisplay">
      <div class="marker" style="left: 25%;">
        <span class="text">25</span>
      </div>
      <div class="marker" style="left: 50%;">
        <span class="text">50</span>
      </div>
      <div class="marker" style="left: 75%;">
        <span class="text">75</span>
      </div>
      <div class="marker" style="left: 100%;">
        <span class="text">100</span>
      </div>
    </div>
  </div>
</body>

</html>

To achieve the desired mockup and address the mentioned tweaks, you can make the following adjustments to your HTML and CSS code:

Move the labels inside the thermometer.
Adjust the position of the "36" and pointer.
Reverse the coloring.
Here’s an updated version of your code:

<html lang="en">

<head>
  <style>
    body * {
      box-sizing: border-box;
    }

    body {
      background-color: blue;
      margin: 0;
    }

    #actual {
      font-size: 40px;
      color: white;
      position: relative;
      left: 36%;
      margin-top: -30px; /* Adjust as needed */
    }

    #pointer {
      border-top: 10px solid white;
      border-left: 6px solid rgba(0, 0, 0, 0);
      border-right: 6px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      height: 0;
      vertical-align: bottom;
      width: 0;
      position: relative;
      left: 36%;
      bottom: 10px; /* Adjust as needed */
      transform: rotate(180deg);
    }

    #thermometer {
      border: 4px solid grey;
      width: 100%;
      height: 40px;
      background: darkblue;
      border-radius: 50vh 50vh 50vh 50vh;
      overflow: hidden;
      position: relative;
      margin-top: 20px; /* Adjust as needed */
    }

    #progress {
      height: 100%;
      background: white;
      width: 36%;
    }

    #labelRow {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
    }

    .label {
      text-align: center;
      padding: 2px;
      margin: 0;
      color: rgb(0, 0, 0);
    }

    .text {
      display: block;
      font-weight: bold;
    }

    #rangeDisplay {
      display: flex;
      justify-content: space-between;
      margin-top: 10px; /* Adjust as needed */
    }

    .marker {
      border-right: 2px solid white;
      text-align: right;
      padding: 2px;
      color: white;
    }
  </style>
</head>

<body>
  <div id="actual">36</div>
  <div id="pointer"></div>
  <div id="thermometer">
    <div id="progress"></div>
    <div id="labelRow">
      <div class="label">
        <span class="text">None</span>
      </div>
      <div class="label">
        <span class="text">Low</span>
      </div>
      <div class="label">
        <span class="text">Medium</span>
      </div>
      <div class="label">
        <span class="text">High</span>
      </div>
    </div>
  </div>
  <div id="rangeDisplay">
    <div class="marker">
      <span class="text">25</span>
    </div>
    <div class="marker">
      <span class="text">50</span>
    </div>
    <div class="marker">
      <span class="text">75</span>
    </div>
    <div class="marker">
      <span class="text">100</span>
    </div>
  </div>
</body>

</html>

Adjust the margin-top, bottom, and other values as needed for fine-tuning. This code should help you achieve the layout you’re looking for.

Please signup or login to give your own answer.

Click here to cancel reply.