html相对定位实现悬浮按钮

127次阅读
没有评论

在HTML中,可以使用相对定位(position: relative)属性来实现悬浮按钮。具体步骤如下:

  1. 首先,在HTML文档中,使用<button>标签定义悬浮按钮,如下所示:
<button class="float-btn">悬浮按钮</button>
  1. 然后,在CSS样式表中,设置悬浮按钮的样式,如下所示:
.float-btn {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 50%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.float-btn:hover {
    background-color: #333333;
    color: #f2f2f2;
    cursor: pointer;
}

在上面的样式中,我们将悬浮按钮的位置设置为相对定位(position: relative),并设置了它的宽度和高度为100px,背景颜色为#f2f2f2,边框为none,边框半径为50%,阴影为0px 2px 4px rgba(0, 0, 0, 0.25)。我们还设置了悬浮按钮的字体大小、字体粗细和颜色。

  1. 最后,在HTML文档中,将悬浮按钮放置在页面上,并使用top和left属性来控制它的位置,如下所示:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相对定位实现悬浮按钮</title>
    <style>
        .float-btn {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f2f2f2;
            border: none;
            border-radius: 50%;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
            font-size: 16px;
            font-weight: bold;
            color: #333333;
        }

        .float-btn:hover {
            background-color: #333333;
            color: #f2f2f2;
            cursor: pointer;
        }

        .float-btn-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .float-btn-container .float-btn {
            position: relative;
            top: 80%;
            left: 80%;
        }
    </style>
</head>
<body>
<div class="float-btn-container">
    <button class="float-btn">悬浮按钮</button></div>
</body>
</html>

在上面的示例中,我们使用了一个float-btn-container div元素来包裹悬浮按钮,并设置了它的宽度为100%,高度为100vh,overflow为hidden。这样,悬浮按钮就被放置在了页面的右下角,并且无论页面滚动多

正文完
 
评论(没有评论)