default
menu home
arrow_drop_down
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果

styleTags： All CSS html javascript php/other IT
by: fanshome  2023-05-18 08:00(UTC)
Demo

有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只要给元素添加css属性{position:fixed;z-index:10;top:0;left:0}即可。

然而，假如想在页面上某个可滚动的元素（比如div）内实现悬浮固定按钮的话，就需要动点小脑筋了，否则要么按钮的位置（top/left等）是相对于整个页面，而不是相对于div固定；要么按钮会随着鼠标滚动而滚动甚至消失。

这时，我们可以采用在相邻元素添加position:absolute按钮来实现相对固定，从而避免被滚动。比如本页面的“复制代码”按钮，具体实现方法如下：

CSScontent_copyCopy codes
.wrap{width:400px;}
.info{position:relative;color:#098;font-size:18px;font-weight:bold;padding:4px 32px;}
.acode{height:100px;font-size:18px;line-height:24px;overflow:auto;box-sizing:border-box;
margin:0 16px 8px 16px;padding:16px;background:#333;color:#fff;border:solid 1px #aaa;border-radius:8px;}
.acode pre{margin:0;}
.copyBtn{z-index:10;position:absolute;right:60px;top:42px;/*此处的top:42px是相对于.info这个div*/
height:24px;font-size:14px;font-weight:normal;line-height:24px;cursor:pointer;text-align:center;background:#ddd;color:#444;border-radius:4px;padding:2px 4px;}
.copyBtn:hover{background:#eee;}
htmlcontent_copyCopy codes
<div class='wrap'>
	<div class='info'>邻居元素<span class='copyBtn' >按钮</span></div>
		<div class='acode'>
		<pre><code>这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
这里内容比较多，可以滚动
		</code></pre>
	</div>
</div>

需要注意的是，由于按钮的实际显示范围超过了相邻元素本身，所以.info那个容器不能有display:none;或者overflow:hidden;属性。

visibility 2629

- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel