如下图, 在一个带滚动条的弹出框内, 我要将按钮始终固定在弹框的底部, 不随着滚动条移动使用固定定位会随着滚动条移动, 请问有什么较好的方法实现

css 固定定位问题

4 个回答

得票最新

JeremyChen

2.1k86390

发布于
2017-01-14

✓ 已被采纳

是想要这样的效果吗？

<!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文件看看