html - 粘性位置在容器中不起作用

This question already has answers here:

Why position:sticky is not working when the element is wrapped inside another one?

                                    （1个答案）



                            Why element with position:sticky doesn't stick to the bottom of parent?

                                    （2个答案）



                            'position: sticky' not working when 'height' is defined

                                    （2个答案）


                                在11个月前关闭。


我试图将position:sticky添加到容器内部的导航div中。但是，仅当我移除容器或移除容器上方div的高度时，它才起作用。问题的Here is a jsfiddle。删除#main部分可以使粘性位置起作用，但我不知道为什么，因此需要该部分。

body{
  height:2000px;
  background-color:red;
}
nav{
  width:100%;
  height:50px;
  background-color:black;
  z-index:1000;
  position:sticky;
  top:0;
}
#main{
  position:relative;
}
#some-div{
  position: relative;
  height:100vh;
  background-size:cover;
  overflow:hidden;
}

<section id="main">
  <div id="some-div"></div>
  <nav></nav>   
</section>

最佳答案

我在height:100%中添加了#main，因为父级应具有高度。

body{
  height:2000px;
  background-color:red;
}
nav{
  width:100%;
  height:50px;
  background-color:black;
	z-index:1000;
  position:sticky;
  top:0;
}
#main{
  position:relative;
  height:100%;
}
#some-div{
  position: relative;
	height:100vh;
	background-size:cover !important;
	overflow:hidden;
}

<section id="main">
  <div id="some-div"></div>
  <nav></nav>   
</section>

关于html - 粘性位置在容器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54754066/

上一篇：html - 基于图像裁剪父 HTML 容器

下一篇：html - 元素在父宽度上与空间平均分布 - Angular Flexlayout 响应

css - 模拟位置 : fixed in IE6 with a div of 100% height?

javascript - 动态CSS类属性？

html - 溢出视口(viewport)

html - sub 仅对齐一个元素下方的文本

javascript - JavaScript单击函数播放mp3，而不循环

javascript - 如何使用 D3 更改(和过渡)DIV 高度？

php - 将 Zurb Foundation 5 集成到 Wordpress 3.8 主题中

javascript - 有没有办法将两个 thead 都固定在页面顶部？

html - 如何使在 Web 应用程序上创建的 div 出现在父容器的左上角？