Absolutely positioning the center-point of an element at an exact percentage of it's parents width

Question

It's fairly simple to set a good approximation of an element's percentage from the edge using flexbox. In the snippet below if we add 4 elements we can get very close to 0%, 25%, 75%, and 100% units from the left edge of the parent element.

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
  font-family: Arial;
}
body, section, div, ::after {
  display: flex;
  justify-content: center;
  align-items: center;
}
section, section::after {
  justify-content: space-between;
  border-radius: 1.25rem /1rem;
  width: 20rem; height: 5rem;
}
section::after {
  content: '';
  transform: scaleX( 0.85 );
  position: absolute; z-index: -1;
  background-color: #0af;
}
div {
  border-radius: 1rem;
  width: 2.5rem; height: 2.5rem;
  padding: 1.5rem;
  background-color: rgba( 0,0,0,0.5 );
  color: #def;
  backdrop-filter: blur( 0.5rem );  
  -webkit-backdrop-filter: blur( 0.5rem );
}

<section>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>

However how do we accomplish something similar with absolute positioning? How would we place the center of a div exactly 25% from it's parent's left edge, or 75% etc?

left: 25% appears to move specifically the left edge of the element to 25% or something similar.

In the second snippet below we create a second section element with absolutely positioned children and set the left property to various percentages to see this does not work. ( I set the parent element's opacity up so we can see the full parent elements widths )

* { 
  box-sizing: border-box; margin: 0; padding: 0; 
}
html, body { 
  flex-wrap: wrap; height: 100%; font-family: Arial; font-size: 0.75rem; 
}
body, section, div, ::after {
  display: flex; justify-content: center; align-items: center;
}
section, section::after {
  justify-content: space-between; border-radius: 1.25rem /1rem;
  width: 20rem; height: 5rem;
}
section { position: relative; margin: 2rem; }
section::after, section::before {
  content: '';
  transform: scaleX( 0.85 ); position: absolute; z-index: -1;
  background-color: #0af;
}
section::before {
  content: 'flex box';
  transform: translateX( -50% ); top: -50%; left: 50%;
  background-color: transparent; color: #0af;
}
section:last-of-type::after { background-color: #a0f; }
section:last-of-type::before { content: 'absolute position'; color: #a0f; }
div {
  border-radius: 1rem;
  width: 2.5rem; height: 2.5rem;
  padding: 1.5rem;
  background-color: rgba( 0,0,0,0.5 ); color: #def;
  backdrop-filter: blur( 0.5rem ); -webkit-backdrop-filter: blur( 0.5rem );
}

<style>
  section {
    background-color: rgba( 0,0,0,0.0625 );
  }
  section:last-of-type div {
    position: absolute; color: #fde;
  }
  section:last-of-type div:nth-of-type( 1 ) {
    left: 0%;
  }
  section:last-of-type div:nth-of-type( 2 ) {
    left: 25%;
  }
  section:last-of-type div:nth-of-type( 3 ) {
    left: 75%;
  }
  section:last-of-type div:nth-of-type( 4 ) {
    left: 100%;
  }
</style>

<section>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>
<section>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>

So how do we position the center of a child element to a specific percentage from the left of it's container?

Answer 1

With a transform

section {
  width: 20rem;
  height: 5rem;
  background: linear-gradient(to right, grey 25%, green 25%, green 50%, blue 50%, blue 75%, orange 75%);
  position: relative;
}

div {
  position: absolute;
  height: 50%;
  background: pink;
  transform: translateX(-50%);
}

div:nth-of-type(1) {
  left: 0%;
}

div:nth-of-type(2) {
  left: 25%;

}

div:nth-of-type(3) {
  left: 75%;
}

div:nth-of-type(4) {
  left: 100%;
}

<section>
  <div>0%</div>
  <div>25%</div>
  <div>75%</div>
  <div>100%</div>
</section>