Question

首先，您可以使用示例代码：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;  
 }

在该代码中，您将看到：

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

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

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

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

如果可能，不使用javascript并仅使用CSS ...

你们有没有人知道这是否真的可以实现？

Answer 1

您可以通过以下方式执行此操作：

从position: relative

.blabla

在position: absolute，.wrapper和.parent设置.child。

＆＃13;

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

＆＃13;

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

＆＃13;

CODEPEN

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

}

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

2 个答案: