将元素的中心点绝对定位在其父元素宽度的精确百分比处

Question

使用 flexbox 设置元素与边缘的近似百分比相当简单。在下面的代码片段中，如果我们添加 4 个元素，我们可以从父元素的左边缘非常接近 0%、25%、75% 和 100% 单位。

* {
  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>

但是我们如何用绝对定位来完成类似的事情呢？ 我们如何将 div 的 center 放置在距其父级左边缘正好 25% 或 75% 等的位置？

left: 25% 似乎专门将元素的 左边缘 移动到 25% 或类似的东西。

在下面的第二个代码段中，我们创建了第二个section元素，其中包含绝对定位的子元素，并将left 属性设置为不同的百分比看到这个不行。 （我设置了父元素的不透明度，以便我们可以看到完整的父元素宽度）

* { 
  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>

那么我们如何将子元素的中心定位到距其容器左侧特定百分比的位置？

Answer 1

有变换

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>

将元素的中心点绝对定位在其父元素宽度的精确百分比处

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

html

css

css-position

css-transforms

absolute

那么我们如何将子元素的中心定位到距其容器左侧特定百分比的位置？