Question

我正试图将容器居中并将菜单固定在顶部。但是.nav中的Hover不起作用。当我切割绝对属性时，它会起作用，当我保留绝对属性并切割top right bottom left 0时，它也可以。为什么会这样？

    <head>
    <style type="text/css">
        body{

            background-color: black;
        }
        .menu{
            position: fixed;
            top: 0;
            height: 10%;
            width: 100%;
            color: white;
            background-color: orange;
            border-radius: 10px;
            left: 0;
        }
        .nav{
            display: inline-block;
            background-color: black;
            height: 90%;
            width: 26%;
            text-align: center;
            border-radius: 10px;
            margin-right:3%;
            margin-left: 3%;
            margin-top: 4px;

        }
        .nav:hover{
            background-color: blue;
            color: red;
            cursor: pointer;
        }
        .container{
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            left: 0;
            bottom: 0;
            color: white;
        }
        form{
            position: relative;
            background-color: grey;
            border-radius: 5px;
            width: 400px;
            height: 200px;
            margin: 0 auto;
            margin-top: 10%;
        }
        form:hover{
            box-shadow: 3px 3px 2px white;
            transition: all 1s;
        }
        input{
            position: absolute;
            border-radius: 50%;
            text-align: center;
        }
        input:hover{
            box-shadow: 2px 2px 2px white;
            transition: all 1s;
        }
    </style>

</head>
        <body>
            <div class="menu">
                <div class="nav">
                    Consulta    
                </div>
                <div class="nav">
                    Venta
                </div>
                <div class="nav">
                    Agregar
                </div>
            </div>
            <div class="container" id="consulta">
                <form>
                      First name:<br>
                      <input type="text" name="firstname" value="Mickey">
                      <br>
                      Last name:<br>
                      <input type="text" name="lastname" value="Mouse">
                      <br><br>
                      <input type="submit" value="Submit">
                </form>
            </div>
        </body>

Answer 1

这种情况正在发生，因为.container也是绝对定位的，并且归功于top:0。和你的Html一样，你的容器在菜单后面，它会自动显示在上面。

正如@Georgette Pincin所说，您可以在菜单中添加z-index，以便将其保留在容器上方，或者您也可以编辑容器top值以使其在菜单（Fiddle）：

.container{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50px;
    left: 0;
    bottom: 0;
    color: white;
}

Answer 2

在.menu类上放置一个z-index

 .menu{
        position: fixed;
        top: 0;
        height: 10%;
        width: 100%;
        color: white;
        background-color: orange;
        border-radius: 10px;
        left: 0;
        z-index: 10;
    }

codepen example

固定菜单：将鼠标悬停在下面的绝对居中形式容器中

2 个答案: