HTML / CSS - 创建一个粘性覆盖

Question

我正在开发一个项目（HTML 和 CSS 页面），其中页面顶部有一个导航栏，导航栏下方有一个主容器，左侧有一个菜单。

菜单是隐藏的，当我将鼠标移动到窗口的左边缘时，它会出现，并与主容器重叠。

如果我向下滚动页面，导航栏会滚动，并且菜单会向上移动，直到到达顶部。然后它停了下来，一直在这个地方。

我或多或少地做到了。但是我还是有问题。

为了以简单的方式说明我的项目，我使用了我在 css-tricks.com 网站上找到的一些基本代码，并对其进行了一些修改以显示我的问题。

代码如下：

#sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
}
.extra,
#wrapper {
  display:flex;
  width: 75%;
  margin: auto;
  background-color: #ccc;
}
#wrapper {
  height: 800px;
}
.extra {
  height: 100px;
}
body {
  font-family: georgia;
  height: 1000px;
}
h4 {
  text-align: center;
}
@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}

<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
  <div id="sticky">
    sticky
  </div>
  <div id=brol>
    This part should be overlapped by the sticky element
  </div>
</div>
<br />
<div class="extra"></div>

这里，'extra' div 是我的导航栏，主容器是灰色部分，粘性元素是菜单。

我想要的是主容器（灰色部分）确实使用了完整的宽度和高度，这意味着其中的文本应该出现在左上角并与粘性 div 重叠。

我怎样才能做到这一点？

Answer 1

我使用 z-index 来处理重叠内容：

#sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
  z-index: 2;
}
.extra,
#wrapper {
  width: 75%;
  margin: auto;
  background-color: #ccc;
  z-index:1;
}
#wrapper {
  height: 800px;
}
.extra {
  height: 100px;
}
body {
  font-family: georgia;
  height: 1000px;
}
h4 {
  text-align: center;
}
#brol{
  margin-top: -100px;
}

@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}

Answer 2

// added .sticky-parent

.sticky-parent {
    width: 0;
}
#sticky {
    position: sticky;
    position: -webkit-sticky;
    background: #f83d23;
    width: 100px;
    height: 100px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 6px #000;
    color: #fff;
}

.extra, #wrapper {
    display: flex;
    width: 75%;
    margin: auto;
    background-color: #ccc;
}

#wrapper {
    height: 800px;
}

.extra {
    height: 100px;
}

body {
    font-family: georgia;
    height: 1000px;
}

h4 {
    text-align: center;
}

@media (min-height: 768px) {
    #wrapper {
        height: 2000px;
    }
}

<div class="sticky-parent">
    <div id="sticky">
        sticky
    </div>
</div> 
<div id="brol">
    This part should be overlapped by the sticky element
</div>

Answer 3

您可以通过将粘性 div 包装在绝对定位的 div 中来实现此行为。这将使其余部分使用全部可用空间。

不要忘记将position:relative 添加到它的父级，在您的简化情况下为#wrapper，以确保它不会占用文档或它找到的第一个相对父级的完整宽度和高度

#sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
}
#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.extra,
#wrapper {
  position: relative;
  display:flex;
  width: 75%;
  margin: auto;
  background-color: #ccc;
}
#wrapper {
  height: 800px;
}
.extra {
  height: 100px;
}
body {
  font-family: georgia;
  height: 1000px;
}
h4 {
  text-align: center;
}
@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}

<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
  <div id="mask">
    <div id="sticky">
      sticky
    </div>
  </div>
  
  <div id=brol>
    This part should be overlapped by the sticky element
  </div>
</div>
<br />
<div class="extra"></div>