default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

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

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-05-18 08:00(UTC)
演 示

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

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

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

CSScontent_copy复制代码
.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_copy复制代码
<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 1116

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消