如何使用转换翻译属性将元素移动到带有溢出的 div 之外

Question

我想使用 CSS 属性将一个元素移动到溢出的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>