CSS固定定位之实现漂浮窗靠近页面版心一侧的方法 

  在浏览很多网站时经常会看到有一些悬浮窗固定在浏览界面的某一个位置，这种效果通常都是使用固定定位属性来实现。但是很多页面的固定窗都保持紧靠着版心的左侧或者右侧，当浏览界面宽度小于版心时则不会被显示出来，这种效果实现起来其实很简单，同样是使用CSS固定定位属性来实现。具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .body {
            width: 1000px;
            height: 1000px;
            border: 1px solid;
            background-color: #f4f4f4;
            margin: 0 auto;
            text-align: center;
            line-height: 800px;
            font-size: 80px;
        }

        .fixed {
            /* 设置为固定定位 */
            position: fixed;
            /* 使用50%将元素调整为紧贴浏览界面中线右侧 */
            left: 50%;
            /* 设置margin-left等于版心宽度的一半来将浮动的元素再向右推进实现紧贴版心右侧 */
            margin-left: 510px;
            bottom: 50px;
            width: 50px;
            height: 80px;
            background-color: yellow;
            font-size: 18px;
            color: red;

            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="body">
        中间是body版心内容
    </div>
    <div class="fixed">
        这是右侧悬浮框
    </div>
</body>

</html>

posted @ 2021-02-02 22:40  雪漠阳光  阅读(559)  评论(0)  编辑  收藏  举报