html - 在没有容器溢出的情况下，将容器内的元素定位到任何指定百分比的最简单方法是什么？

Question

有没有办法以类似的方式在容器中定位元素，就像定位背景图像一样？

CSSimage-position的效果绝对惊人：

.container {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  
  background-image:
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100');
  background-repeat: no-repeat;
  background-position: 0% 0%, 25% 25%, 50% 50%, 75% 75%, 100% 100%;
}

<div class="container"></div>

无论您设置什么百分比，这将是您的背景图像的位置，没有容器溢出。

但是，当您使用属性定位元素时left, right, top, bottom，这种类型的定位并不相同。试图达到与上述相同的结果可能非常麻烦：

    .container {
      width: 100%;
      height: 250px;
      border: 1px solid black;
      position: relative;
    }
    .container img {
      position: absolute;
     }

<div class="container">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 0%; top: 0%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 25%; top: 25%; transform: translate(-25%, -25%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 50%; top:50%; transform: translate(-50%, -50%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 75%; top: 75%; transform: translate(-75%, -75%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 100%; top: 100%; transform: translate(-100%, -100%);">
</div>

所以我的问题是 - 将容器内的元素定位到任何指定百分比的最简单方法是什么？有没有比我展示的更好的方法？

标签： htmlcsscss-position

Answer 1

使用 CSS 变量：

.container {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  position: relative;
}

.container img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(calc(-1*var(--x)), calc(-1*var(--y)));
}

<div class="container">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 0%; --y: 0%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 25%; --y: 25%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 50%; --y:50%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 75%; --y: 75%">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 100%; --y: 100%;">
</div>