favinavi - Online notes-CSS-page3

有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只要给元素添加css属性{position:fixed;z-index:10;top:0;left:0}即可。
然而，假如想在页面上某个可滚动的元素（比如div）内实现悬浮固定按钮的话，就需要动点小脑筋了，否则要么按钮的位置（top/left等）是相对于整个页面，而不是相对于div固定；要么按钮会随着鼠标滚动而滚动甚至消失。
这时，我们可以采用在相邻元素添加position:absolute按钮来实现相对固定，从而避免被滚动。比如本页面的“复制代码”按钮，具体实现方法如下：

by: fanshome  visibility 2630
2023-05-18 08:00 (UTC)