div 跳过溢出隐藏但保持相对于父 div答案

【问题标题】：div skipping overflow hidden but remaining relative to parent divdiv 跳过溢出隐藏但保持相对于父 div
【发布时间】：2017-01-19 14:29:58
【问题描述】：

首先，您有一个带有示例的代码笔：http://codepen.io/anon/pen/VPPjYp

HTML：

<body>
  <ul>
    <li class="blabla span6">  
      asdfasdf<br>
      <span>asdfas</span>
      <div class="bleble"></div><br>
      <div class="wrapper">
        <div class="parent">
          <div class="child"><div class="blibli">aabasdg</div></div>
        </div>
      </div>    
    </li>
  </ul>
</body>

CSS：

.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;  
 }

在那个codepen中你会看到：

文档正文（绿色）
li 元素（红色）隐藏了 CSS 溢出
li 元素内的一些内容（一些单词和一个蓝色 div）
一个特殊的div，它不关心“li”（橙色）的溢出隐藏

从示例中可以看出，当您向下滚动页面主体时，橙色 div 在溢出隐藏的“li”元素之外保持在相同的固定位置。

我想要发生的是橙色框保持在溢出隐藏之外（就像现在一样）但在父元素的相对位置（在那个cas中“li”），所以当你向下滚动时它不在页面中的固定位置上，而是在与父级的相对位置上。

我想强调一个事实，它应该跳过父级的溢出隐藏......这是一个无法改变的条件......

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

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

【问题讨论】：

它在真实代码中，我刚刚创建了一个快速示例，将我的一堆代码复制到 codepen 并对其进行编辑以检查它如何执行我的要求
我刚刚进行了编辑，所以它完成了你所说的，对我的问题有什么想法吗？
父母的相对位置是什么意思？
在我的问题上链接的代码笔中，我的意思是“父母的相对位置”如果你在身体上向下滚动并且“橙色框”保持相同的距离和位置会发生什么父亲。
.child { position:fixed; - 这就是导致问题的原因。

标签： html css

【解决方案1】：

您可以这样做：

从.blabla 中删除position: relative
在.wrapper、.parent 和.child 上设置position: absolute。

.wrapper {
  position: absolute;
  width: 1280px;
}
.parent {
  position: absolute;
}
.child {
  position: absolute;
  width: 960px;
}
.blabla {
  overflow: hidden;
  background-color: red;
  height: 90px;
  margin: 10px;
  padding: 10px;
}
.bleble {
  height: 10px;
  width: 90px;
  background-color: blue;
}
.blibli {
  height: 150px;
  width: 60px;
  background-color: orange;
}
body {
  height: 900px;
  background-color: lightgreen;
}

<body>
  <ul>
    <li class="blabla span6">
      asdfasdf
      <br>
      <span>asdfas</span>
      <div class="bleble"></div>
      <br>
      <div class="wrapper">
        <div class="parent">
          <div class="child">
            <div class="blibli">aabasdg</div>
          </div>
        </div>
      </div>


    </li>
  </ul>

</body>

CODEPEN

【讨论】：

非常感谢@ovokuro！如果它适用于我的应用程序，我现在会检查它并将这个问题标记为答案，以防它按预期工作！
我确认它完全符合我的预期。
太好了，很高兴它有帮助:)

【解决方案2】：

试试这个

.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;

}

【讨论】：