html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因

position: sticky; 基于用户的滚动位置来定位。

粘性定位在 position:relative 与 position:fixed 定位之间切换。在没有超出指定值时，它的行为就像 position:relative; 而当页面滚动超出指定值时，它的表现就像 position:fixed;，固定在目标位置。

以下情况position: sticky;会失效。

1.它的父元素或祖先元素设置：

• overflow:hidden;
• overflow-x: hidden;
• overflow-y: hidden;
• overflow:auto;
• overflow-x:auto;
• overflow-y:auto;

中的任意一种或多种时，都不会生效。

2.在使用粘性定位时，需要设置top,right,bottom,left其中的任意一个或多个值，如果未设置，相当于没设置脱离文档流后的指定（固定）位置依据，并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

3.一个页面中，多处设置sticky。如果设置的所固定的位置相同，z-index值也相同，则后面所设置sticky属性的盒子滚动到相应位置时会覆盖住前面的。若z-index值不同，z-index值大的 覆盖住z-index小的。

4.

• 父元素设置sticky top:0 ，子元素设置sticky top:0 ，在z-index值相等 或者子元素z-index大于父元素时，子元素在上面并且吸顶 ，滚动出父元素后 ，子元素还在吸顶，直到下一个sticky覆盖。多层时， 可以给父元素一起设置sticky ，或者将sticky设置在最外层。
• 子元素和父元素都设置 sticky top:0 ,z-index值相等 给子元素距离父元素一个margin-top: 100px;那么吸顶的是父元素 子元素将一直在100px位置不会移动。

我所遇到的一个问题是：

position: sticky;在实现我所设定的预期效果时，并未完全失效，在滑动一定长度后失效。

原因及解决办法：因为要写的网页较长，我并未设置最外层盒子的高度，所以导致position: sticky;不完全失效的现象。此时给最外层盒子加个很大的高度数值就可以解决了；

一个简单的用例：

效果图：

html代码：

<div class="wrapper">
		<div class="second"></div>
		<div class="first"></div>
		<div class="third"></div>
		</div>

css全部代码：

*{
				margin: 0;
				padding: 0;
			}
			.wrapper{
				height: 3000px;
				width: 1000px;
				margin: 0 auto;
			}
			.second{
				width: 0px;
				height: 0px;
				border-top:30px solid blue;
				border-right:30px solid white;
				border-bottom: 30px solid white;
				border-left: 30px solid white;
			}
			.first{
				background-color: aqua;
				border: 1px solid white;
				width: 200px;
				height: 100px;
				border-radius: 0px 0px 100px 100px;
			}
			.third{
				background-color: yellow;
				position: sticky;
				/* 粘性定位 */
				top: 0px;       
				border:1px solid white;
				width: 100px;
				height: 200px;
				border-radius: 100px 0px 0px 100px;
			}