css 固定定位问题

super_Maria
  • 326
  1. 如下图, 在一个带滚动条的弹出框内, 我要将按钮始终固定在弹框的底部, 不随着滚动条移动

  2. 使用固定定位会随着滚动条移动, 请问有什么较好的方法实现

  3. 图片描述

回复
阅读 2.2k
4 个回答

是想要这样的效果吗?

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

把按钮放在相对于滚动元素的上一级...然后固定定位

position:fixed; TOP:100PX;right:50px; 100是高度根据位置设置 50是与左边的距离!根据实际情况设置

在父级元素设置 position: relative;
在元素上设置 position: absolute; bottom:50PX;left:50%; margin-left:负一半自己的宽;

你知道吗?

宣传栏