Question

我有一个问题......在下面的示例中，我不希望修复的div越过背景为红色的div。

以下是示例：

 #fixedContainer
{
    background-color:#ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px; /*half the width*/
}

Answer 1

好吧，我想我得到OP想要的东西。他想要一个固定在视口顶部的容器，但仍然由父母限制。此行为称为条件粘性行为，实际上在Firefox（无供应商前缀）和macOS / iOS Safari（带-webkit-前缀）中实现：请参阅position: sticky。

因此，最简单（但也是最少跨浏览器兼容）的方法只是修改标记，使粘性元素保留在父级中，并在其上声明position: sticky：

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ddd;
  position: -webkit-sticky;
  position: sticky;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0);  /* Negative left margins do not work with sticky */
}
#div1 {
  height: 200px;
  background-color: #bbb;
}
  #div1 .content {
    position: relative;
    top: -100px;  /* Top offset must be manually calculated */
    }
#div2 {
  height: 500px;
  background-color: red;
}

<div id="div1">
  <div id="fixedContainer">I am a sticky container that stays within the sticky parent</div>
  <div class="content">Sticky parent</div></div>
<div id="div2">Just another element</div>

另一种方法是使用基于JS的解决方案。在这种情况下，您实际上不必修改标记。但是，我更改了ID以便更容易识别元素。

逻辑的要点是：

当滚动位置没有超过父母的底部减去粘性内容的外部高度时，我们什么都不做。
当滚动位置超出父级的底部减去粘性内容的外部高度时，我们会动态计算粘性内容的top位置，以便它在父级中可视化。

$(function() {
  $(window).scroll(function() {
    var $c = $('#sticky-container'),
      $s = $('#sticky-content'),
      $t = $(this); // Short reference to window object

    if ($t.scrollTop() > $c.outerHeight() - $s.outerHeight()) {
      $s.css('top', $c.offset().top + $c.outerHeight() - $t.scrollTop() - $s.outerHeight());
    } else {
      $s.css('top', 0);
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
div {
  height: 500px;
  background-color: red;
}
#sticky-container {
  background-color: #bbb;
  height: 200px;
}
#sticky-content {
  background-color: #ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  left: 50%;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-content">Sticky content that stays within the bounds of #div1</div>
<div id="sticky-container">Sticky confinement area</div>
<div>Other content</div>

OP之前的旧回答恰当地澄清了问题：

只需向他们提供适当的z-index值即可。在这种情况下，您想要：

请勿使用静态定位。这可以通过将position: relative用于大型元素以及最初的position: fixed元素来完成。
指定适当的堆叠顺序。灰色<div>元素的最低z-index，后跟固定位置元素，然后是红色元素。

虽然堆叠有一些问题：当您遍历或关闭节点树时，堆叠上下文是重置。例如，如果元素不是兄弟，则该示例将不起作用。

这是一个概念验证示例，从您的小提琴中修改，以便删除内联CSS。

* {
  margin: 0;
  padding: 0;
}
#fixedContainer {
  background-color: #ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px;
  z-index: 2;
}
#div1 {
  height: 200px;
  background-color: #bbb;
  position: relative;
  z-index: 1;
}
#div2 {
  height: 500px;
  background-color: red;
  position: relative;
  z-index: 3;
}

<div id="fixedContainer">z-index: 2</div>
<div id="div1">z-index: 1</div>
<div id="div2">z-index: 3</div>

Answer 2

只需给出z-index 希望它有所帮助...

http://jsfiddle.net/HFjU6/1/#run

＆＃13;

#fixedContainer {
  background-color:#ddd;
  position: fixed;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 0%;
  margin-left: -100px; /*half the width*/
  z-index: 2;
}

.div-red {
  position: relative;
  z-index: 5;
}

＆＃13;

<div id="fixedContainer"></div>
<div style="height:200px;background-color:#bbb;"></div>
<div style="height:500px;background-color:red;" class="div-red"></div>

＆＃13;

如何防止克服其他div？

2 个答案: