带有 "position: fixed" 属性的自定义按钮问题

Question

我想设计一个简单的页面，按钮将显示在顶部的固定位置，并带有一些 hover、box-shadow 和 cursor 属性，一旦其中一个按钮悬停他们周围会有一些阴影。为此，为了方便起见，我在 div 标记中使用 position: fixed 属性作为按钮框架，这样当所有按钮都通过 CSS 样式设置时，我可以立即更改所有按钮的位置。但是，这仅在我不向下滚动页面时才有效。当我向下滚动时，它会丢失这三个（hover、box-shadow 和 cursor）属性。我无法解决这个问题。我该如何解决？

这是我目前得到的代码块：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="User">
        <title>Home Page</title>
        <style>
            body {
                background-color: rgb(255, 255, 255);
                margin: 0px;
                padding: 0px;
                border-style: none;
            }
            .mainFrame {
                position: absolute;
                top: 0px;
                left: 131px;
                width: 700px;
                height: 800px;
                margin: 0px 0px 31px 0px;
                padding: 0px;
                border-style: solid;
                border-color: rgb(0, 0, 0);
                border-width: 0px 2px 2px 2px;
                border-radius: 0px 0px 131px 0px;
            }
            .buttonFrame {
                position: fixed;
                top: 0px;
                left: 133px;
                width: 500px;
                height: 39px;
                margin: 0px;
                padding: 0px;
                border-style: none;
            }
            .button {
                height: 29px;
                margin: 0px;
                padding: 4px 7px 4px 7px;
                background-color: rgb(255, 99, 71);
                border-style: solid;
                border-color: rgb(0, 0, 0);
                border-width: 0px 2px 2px 2px;
                border-radius: 0px 0px 131px 0px;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 23px;
                text-align: left;
                cursor: pointer;
                outline: none;
            }
            .buttonEffect:hover {
                box-shadow: 0 13px 17px 0 rgba(0,0,0,0.25), 0 13px 17px 0 rgba(0,0,0,0.25);
                outline: none;
            }
            .Home {
                position: absolute;
                top: 0px;
                left: 31px;
                width: 64px;
            }
            .Notes {
                position: absolute;
                top:0 px;
                left: 144px;
                width: 64px;
            }
            .AboutMe {
                position: absolute;
                top: 0px;
                left: 257px;
                width: 105px;
            }
            .contentFrame {
                position: absolute;
                top: 40px;
                left: 0px;
                width: 500px;
                height: 400px;
                margin: 0px;
                padding: 0px;
                border-style: none;
            }
        </style>
    </head>
    <body>
        <div class="mainFrame">
            <div class="buttonFrame">
                <a class="button Home buttonEffect" title="Home">Home</a>
                <a class="button Notes buttonEffect" title="Notes">Notes</a>
                <a class="button AboutMe buttonEffect" title="About Me">About Me</a>
            </div>
            <div class="contentFrame">

            </div>
        </div>
    </body>
</html>

Answer 1

从 class.contentFrame

中删除绝对位置

带有 "position: fixed" 属性的自定义按钮问题

Issue with a Custom Button with "position: fixed" Attribute

html

css

css-position

hover

box-shadow