固定在网页右侧的浮动层实现代码-前端开发

实现在网页右侧浮动的层，使用的是position属性。

实现在网页右侧浮动的层，使用的是position属性。

在HTML中创建浮动层

首先在HTML文件的<body>标签结束前添加如下代码

<div class="float-layer">Hello world</div>

其中，我们的浮动层被指定为float-layer。我们将在CSS部分设置其样式。

在CSS中设置浮动层样式

在CSS文件中添加以下代码

.float-layer {
    position: fixed; 
    top: 50%; 
    right: 0; 
    background-color: #fff; 
    padding: 10px; 
    border: 1px solid #ccc; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    transform: translateY(-50%);
    width: 200px;
}

其中的关键属性如下：

position: fixed; ：固定在浏览器窗口中，不随页面滚动而改变位置
top: 50%; ：距离窗口的顶部距离为浏览器窗口高度的一半
right: 0; ：靠近窗口的右侧边缘
background-color ：浮动层的背景颜色
padding ：浮动层的填充大小
border ：浮动层的边框效果
box-shadow ：浮动层周围的阴影效果
transform: translateY(-50%); ：将浮动层向上移动50%，以使其垂直居中
示例1

<html>
    <head>
        <title>Document Title</title>
        <style>
            .float-layer {
                position: fixed;
                top: 50%;
                right: 0;
                background-color: #fff;
                padding: 10px;
                border: 1px solid #ccc;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                transform: translateY(-50%);
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div class="float-layer">
            <h1>Hello world</h1>
            <p>This is an example of a floating layer on the right-hand side of a webpage.</p>
        </div>
    </body>
</html>

示例2

<html>
    <head>
        <title>Document Title</title>
        <style>
            .float-layer {
                position: fixed;
                top: 50%;
                right: 0;
                background-color: #fff;
                padding: 10px;
                border: 1px solid #ccc;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                transform: translateY(-50%);
                width: 200px;
            }
            #content {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Document Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel elit augue. Nullam cursus auctor volutpat. Curabitur elit nulla, tempus non urna at, consequat pellentesque sapien. Nunc diam mauris, lacinia at volutpat in, pulvinar non felis. Proin ut consectetur libero. Nullam porttitor dignissim elit et hendrerit. Morbi gravida elementum justo, non bibendum metus placerat at.</p>
            <p>Mauris sit amet placerat mauris, vel placerat mauris. Cras bibendum posuere risus ut facilisis. Suspendisse sodales vestibulum ex eu facilisis. Donec maximus sagittis urna, sit amet tincidunt ex pellentesque id. Curabitur eget ligula sit amet ligula varius blandit in ac arcu. Praesent pulvinar, magna eu pulvinar commodo, augue leo dignissim velit, a volutpat ante lacus vel sapien. Ut rhoncus sodales dui. Fusce enim purus, malesuada ut elementum non, fringilla a ipsum. Donec ut aliquam neque, id tempus felis.</p>
            <p>Pellentesque mollis eget dolor in interdum. Suspendisse eget luctus sapien. Etiam vitae turpis ex. Integer varius diam at cursus lacinia. Sed magna tellus, auctor vitae euismod in, mollis ac felis. Sed a vehicula metus, non hendrerit enim. Nulla magna lectus, interdum et sagittis sit amet, ornare sed sapien. Quisque laoreet, massa ac vulputate egestas, purus urna laoreet felis, vitae feugiat justo lacus id dolor. Nullam ac nulla turpis. Fusce risus libero, facilisis non malesuada in, porta ac eros. Vestibulum commodo enim et justo rhoncus sollicitudin.</p>
        </div>
        <div class="float-layer">
            <p>This is an example of a floating layer on the right-hand side of a webpage.</p>
        </div>
    </body>
</html>

在这个例子中，我们添加了一个固定宽度的容器，将其填充到页面最大宽度的600px 并在屏幕的中央对齐，然后我们固定了一层在浮动层的页面右侧。