css - 如何使用 transform translate 属性将元素移动到溢出的 div 之外？

Question

我想使用 CSS 属性 transform translate 将一个元素移动到溢出的 div 之外

我怎样才能得到与“没有溢出”的例子相同的结果位置:固定?

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>