相对位置和溢出自动答案

【问题标题】：Relative position and overflow auto相对位置和溢出自动
【发布时间】：2018-11-23 00:31:02
【问题描述】：

我遇到了溢出问题：自动和相对位置？我的代码示例是：

div {
  border: 3px dashed #ccc;
  padding: 20px;
}

div::before { content: attr(class); }

.grandparent { overflow: auto; }
.parent { position: relative; }
.child { position: absolute; height: 60px; background: black; color: white; }

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

我希望div.child 超过div.grandparent，但因为div.parent 和他的position: relative 导致溢出。

请注意，我需要绝对定位 .parent 内的元素 - 相对于 .parent 的位置 - （这就是我需要 position: relative 的原因），我还需要一个可滚动的 .grandparent。

预期结果：

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
编辑了代码，以便清楚地显示问题。
@connexo position:relative 可以被删除，你会得到预期的输出。如果您没有设置顶部/左侧/右侧/底部值，则不需要它
@connexo 所以我们需要一个真实的场景来解决。你不会找到这个问题的通用解决方案。我做过类似的事情：stackoverflow.com/a/60912860/8620333 我可以在这里申请，但可能不适合你的真实场景（我相信它适用于这个简单的案例）

标签： css position overflow

【解决方案1】：

div, div.child::after {
  border: 3px dashed #ccc;
  padding: 20px;
}

div::before { content: attr(class); }

.grandparent { overflow: auto; }
.parent { position: relative;}
.child::before{ content: " " }
.child {position: relative; overflow: auto; }
.child::after {content: attr(class); position: absolute; height: 60px; background: black; color: white;
}

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

这是您的答案，但似乎不实用 因为现实中不能这样实现

请清楚地提出您的问题或用一个更实际的例子

【讨论】：

我看不出这是如何实现任何远程有用的。它无论如何都达不到预期的效果。