Html div跳过溢出隐藏但相对于父div保留

首先，这里有一个带有示例的代码笔：

HTML:

在该代码笔中，您将看到：

文件正文为绿色 隐藏CSS溢出的li元素红色 li元素中的一些内容一些单词和蓝色div 一个特殊的div，它不关心李橙的溢出隐藏 正如在示例中所看到的，当您向下滚动页面主体时，橙色div仍保持在溢出隐藏li元素外部的相同固定位置

我希望发生的是，橙色框保持在溢出隐藏之外，就像现在一样，但它位于父元素的相对位置，即li，因此当向下滚动时，它不会保持在页面中的固定位置，而是相对于父元素的相对位置

我想强调的是，它应该跳过父级的溢出隐藏。。。这是一种无法改变的状况

如果可能的话，不使用javascript，只使用CSS

你们知道这是否真的可行吗？

你们可以通过以下方式来实现：

移除位置：相对于.blabla 设置位置：绝对在.wrapper、.parent和.child上。 .包装纸{ 位置：绝对位置； 宽度：1280px； } .家长{ 位置：绝对位置； } .孩子{ 位置：绝对位置； 宽度：960px； } 布拉布拉先生{ 溢出：隐藏； 背景色：红色； 高度：90px； 利润率：10px； 填充：10px； } 布莱布尔先生{ 高度：10px； 宽度：90px； 背景颜色：蓝色； } 布利布利先生{ 高度：150像素； 宽度：60px； 背景颜色：橙色； } 身体{ 高度：900px； 背景颜色：浅绿色； } asdfasdf asdfas aabasdg 试试这个

.wrapper {  
  width:1280px; 
}

.child { 
  position:absolute;
  top: calc(100% - 20px);
  width:960px; 
}

.blabla {
  background-color: red;
  height: 90px;
  margin: 10px;
  padding: 10px;
  position: relative;
}

.bleble{
  height: 10px;
  width: 90px;
  background-color: blue;
}

.blibli{
  height: 150px;
  width: 60px;
  background-color: orange;
}

body {
  height: 900px;
  background-color: lightgreen;

}

---

这是在真实的代码中，我刚刚创建了一个快速示例，将我的一堆代码复制到代码笔中，并对其进行编辑，以检查如何执行askI刚刚编辑的内容，从而完成您所说的内容，你知道我的问题吗？你所说的父母的相对位置是什么意思？在我的问题上链接的代码笔中，我指的是父母的相对位置。如果你向下滚动身体，橙色框与父亲和孩子保持相同的距离和位置，会发生什么{位置：已修复；-这就是问题的原因。非常感谢@ovokuro！如果它在我的应用程序上运行，我将立即检查它，并将此问题标记为答案，以防它按预期运行！我确认它完全按照我的预期运行。很好，很高兴它有帮助：

.wrapper { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }
.blabla {
   overflow:hidden;
   background-color: red;
   height: 90px;
   margin: 10px;
   padding: 10px;
   position: relative;
 }
.bleble{
   height: 10px;
   width: 90px;
   background-color: blue;
 }

 .blibli{
   height: 150px;
   width: 60px;
   background-color: orange;
 }

 body {
   height: 900px;
   background-color: lightgreen;  
 }

.wrapper {  
  width:1280px; 
}

.child { 
  position:absolute;
  top: calc(100% - 20px);
  width:960px; 
}

.blabla {
  background-color: red;
  height: 90px;
  margin: 10px;
  padding: 10px;
  position: relative;
}

.bleble{
  height: 10px;
  width: 90px;
  background-color: blue;
}

.blibli{
  height: 150px;
  width: 60px;
  background-color: orange;
}

body {
  height: 900px;
  background-color: lightgreen;

}