關於CSS的粘性定位sticky失效問題

2022年5月04日
-

CSS的粘性定位sticky可以起到吸頂燈的作用，用法如下

<body>
 <div></div>
 <nav style="position:sticky; top:0;"></nav>
 <div></div>
</body>

但是我在一次實踐中使用該屬性把導航欄做成吸頂燈效果時，卻無法實現。經過一番操作後，我終於發現了問題所在，那就是

sticky 的作用範圍只在父元素之內，父元素的兄弟元素會忽略這個屬性，把吸頂的元素頂上去例如下面的代碼中，因為nav已經是父元素header的最後一個元素，所以nav雖然有sticky的屬性，但是沒有發揮的空間。

<body>
 <header>
 <nav style="position:sticky; top:0;"></nav>
 </header>
 <main>
 </main>
</body>

修改代碼，把nav和main放在同一個父元素內即可讓sticky發揮作用

<body>
 <header>
 </header>
 <nav style="position:sticky; top:0;"></nav>
 <main>
 </main>
</body>