更新The only drawback is that it does not solution does not support scrolling

在这次更新中，我们添加了一个容器来保存子节点。我们将该容器转换到父节点的底部，而不是使用#child作为容器。此代码片段允许您使用原始转换代码，而不是使用bottom。

body {
height: 1000px;
}

* {
    margin:0;
}

#parent {
    background: rgba(255, 0, 0, 0.5);   
    width: 200px;
    height: 100px;
}

.container {
  position: relative;
  transform: translateY(60px);
}

/* Must not be visible outside the parent */
#child {
    background-color: blue;
    opacity: 0.4;
    width: 60px;
    height: 40px;
}

/* Must be visible outside the parent */
#grandchild {
    position: absolute;
    background-color: green;
    opacity: 0.5;
    width: 60px;
    height: 60px;
    transform: translateX(100px);
}

<div id="parent">
  <div class="container">
    <div id="child">        
        <div id="grandchild">
        </div>  
    </div>
  </div>
</div>

固定代码不滚动
以您当前的代码，这似乎是不可能的。但是如果您将您的#child的代码从transform: translateY(60px);更改为bottom: -60px，将您的#grandchild更改为position: fixed，代码将按您的预期运行。
一个二个一个一个