将元素的中心点绝对定位在其父宽度的确切百分比[重复]

Question

使用 flexbox 设置元素与边缘的百分比的近似值相当简单。在下面的 sn-p 中，如果我们添加 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% 或类似的位置。

在下面的第二个sn-p中，我们创建了第二个具有绝对定位子元素的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>