html - css 固定定位问题
本文介绍了html - css 固定定位问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如下图, 在一个带滚动条的弹出框内, 我要将按钮始终固定在弹框的底部, 不随着滚动条移动
使用固定定位会随着滚动条移动, 请问有什么较好的方法实现
解决方案
是想要这样的效果吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<style type="text/css">
.big{
width: 300px;height: 300px;margin: 20px auto;position: relative;
}
.box{
border: 2px solid #ccc;overflow: auto;width: 100%;height: 100%;
}
.btn{
position: absolute;bottom: 10px;left: 50%;
}
</style>
</head>
<body>
<div class="big">
<div class="box">
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
<p>你好的 阿里斯顿就来反馈啊；链接；离开家啊；镂空设计的了； </p>
</div>
<button class="btn">按钮</button>
</div>
</body>
</html>这是一个demo，你复制粘贴过去看看，生成html文件看看
这篇关于html - css 固定定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
