css - 如何粘住祖父母元素？

Question

我知道 position:sticky 使元素对其直接父元素具有粘性。但是，是否仍然有可能让它粘在它的祖父母身上？

在这里，我尝试创建一个 jsfiddle：

https://jsfiddle.net/n3ozx2rL/6/

我希望我的搜索栏和第一部分都坚持整个页面（.content）。最后，经过一些滚动后，我想拥有某物。像这样：

目前，第一部分保持其粘性，因为它是内容的直接孩子。但不是 seasrch-bar，它仅在其直接父“标题”内保持粘性。

这是代码，因为 SO 要求它：

.content {
  height: 1000px;
  background-color: yellow;
  padding: 20px;
}

.header {
  height: 100px;
  background-color: orange;
  margin-bottom: 10px;
}

.search-bar {
  padding: 5px;
  position: sticky;
  top: 0;
}

.firstsection {
  height: 50px;
  background-color: green;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
}

.secondsection {
  height: 300px;
  background-color: blue;
}

<div class="content">
  <header class="header">
    <div class="search-bar">
      <input>
      <input>
    </div>
  </header>

  <section class="firstsection">
    <textarea></textarea>
  </section>

  <section class="secondsection">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
  </section>
</div>

标签： css

Answer 1

尝试这个。没有对祖父母产生粘性，但在该屏幕截图中得到了预期的设计。

.content {
  height: 1000px;
  background-color: yellow;
  padding: 20px;
}

.header {
  height: 100px;
  background-color: orange;
  margin-bottom: 10px;
  position:sticky;   
  top:-70px;    
}

.search-bar {
  padding: 5px;
  position: sticky;
  top: 0px; 
}

.firstsection {
  height: 50px;
  background-color: green;
  margin-bottom: 10px;
  position: sticky;
  top: 30px; 
}

.secondsection {
  height: 300px;
  background-color: blue;
}

<div class="content">
  <header class="header">
    <div class="search-bar">
      <input>
      <input>
    </div>
  </header>
  
  <section class="firstsection">
    <textarea></textarea>
  </section>
  
  <section class="secondsection">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
  </section>
</div>