如何将元素移动到具有div转换属性的div之外？

Question

我想通过CSS属性translate translation将元素移动到div溢出的地方

如何获得与“无溢出”示例相同的结果，而没有 position: fixed？

https://jsfiddle.net/to50hf3a/

.main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  height: 80vh;
}

.parent {
  background: #000;
  width: 10rem;
  height: 5rem;
}

.child {
  background: #ccc;
  width: 5rem;
  height: 3rem;
  transform: translate(6rem, 3rem);
}

.child-fixed {
  position: fixed;
}

.overflow {
  overflow: auto;
}

  <div class="main">
  <p>without overflow</p>
  <div class="parent">
    <div class="child"></div>
  </div>

  <p>with overflow</p>
  <div class="parent overflow">
    <div class="child"></div>
  </div>

  <p>with overflow and fixed</p>
  <div class="parent">
    <div class="child child-fixed"></div>
  </div>
</div>

找到的唯一解决方案是使用position: fixed，但在可滚动的页面中也无法正常工作。

Answer 1

尝试以下代码段：

CSS：

.parent {
    background: #000;
    width: 10rem;
    height: 5rem;
}

.overflow {
    overflow: auto;
}

.child {
    background: #ccc;
    width: 5rem;
    height: 3rem;
    transform: translate(6rem, 3rem);
}

HTML：

<div class="parent overflow">
    <div class="child"></div>
    </div>
</div>