CSS：用绝对位置变换比例答案

【问题标题】：CSS: transform scale with position absoluteCSS：用绝对位置变换比例
【发布时间】：2018-04-24 13:53:45
【问题描述】：

我对位置有一点问题：绝对。让我解释一下。

悬停后我有这样的东西：

CSS 代码：

.option {
    width: 50px;
    height: 50px;
    box-shadow: 1px 1px 1px 1px  #888;
}

.option:hover {
    transform: scale(2.25, 2.25);
    transition-duration: 0.01s;
    z-index:10;
    position: absolute;
}

将鼠标悬停在选项上后，我使用了 transform: scale 来放大元素。但是，为了达到预期的效果，我必须添加 position: absolute 属性——这样，悬停后选项就会消失在 div 中。悬停工作正常，但剩下的 3 个选项会离开 - 有什么办法可以解决这个问题吗？我想在悬停后仍然显示 4 个选项，而不是剪切其余选项。

没有position:absolute，元素不会离开div。

【问题讨论】：

标签： css css-position

【解决方案1】：

通过使用transform-origin，您可以不再需要使用绝对定位。将转换的原点从默认（center）移动到左上角（0 0）：

.option {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 1px 1px #888;
  display: inline-block;
}

.option:hover {
  transform: scale(2.25, 2.25);
  transition-duration: 0.01s;
  z-index: 1;
  transform-origin: top left;
}

<div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
</div>

【讨论】：