Question

嗨，这是我在网站右侧有一个滑动菜单的场景，它的位置是固定的。并且有一个链接＆＃34;＆＃34;我希望漂浮在它上面的绝对或相对的z-index像这样，但即使我添加z-index 10000.位置绝对或固定它不显示。滑块div外面。

注意：菜单打开后，＃menu关闭受到谴责

它的CSS和html说实话，我很难过，谢谢你

<a href="#menu" class="close" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></a>



#menu .close {
            background-image: url("images/close.svg");
            background-position: 4.85em 1em;
            background-repeat: no-repeat;
            border: 0;
            cursor: pointer;
            display: block;
            height: 3em;
            position: fixed;
            right: 541px;
            top: 0;
            z-index: 50000;
            display: block;
            vertical-align: middle;
            width: 7em;
        }

HTML

  <div id="header" class="alt">
                <nav id="nav">
                    <ul>
                        <li class="special">


                            <a href="#menu" class="menuToggle"><span> menu</span></a>

                            <div id="menu">
                              <div class="logo_menu">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png">
                             </div> 
                                    <ul>
                                    <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
                                    <li><a href="<?php bloginfo('url'); ?>/company-values">Company Values</a></li>
                                    <li><a href="<?php bloginfo('url'); ?>/our-services">Our services</a></li>
                                    <li><a href="<?php bloginfo('url'); ?>/need-home-health-care-now">Need Home health care now?</a></li>
                                    <li><a href="<?php bloginfo('url'); ?>/meet-the-team">Meet the Team</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>

                </nav>

            </div>

的CSS

        */
    #header {
         -moz-transition: background-color 0.2s ease;
        -webkit-transition: background-color 0.2s ease;
        -ms-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
        background: #2e3842;
        height: 3em;
        left: 112px;
        line-height: 3em;
        position: absolute;
        top: -38px;
        width: 100%;
        z-index: 10000;
    }

        #header h1 {
            -moz-transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
            height: inherit;
            left: 1.25em;
            line-height: inherit;
            position: absolute;
            top: 0;
        }

            #header h1 a {
                border: 0;
                display: block;
                height: inherit;
                line-height: inherit;
            }

                @media screen and (max-width: 736px) {

                    #header h1 a {
                        font-size: 0.8em;
                    }

                }

        #header nav {
            height: inherit;
    line-height: inherit;
    position: absolute;
    right: -5px;
    top: 38px;

        }

            #header nav > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                white-space: nowrap;
            }

                #header nav > ul > li {
                    display: inline-block;
                    padding: 0;
                }

                    #header nav > ul > li > a {
                        border: 0;
                        color: #000;
                        display: block;
                        font-size: 0.8em;
                        padding: 0 1.5em;
                        text-transform: uppercase;
                            padding-left: 0px !important;
                    }

                        #header nav > ul > li > a.menuToggle {
                            outline: 0;
                            position: relative;
                        }

                            #header nav > ul > li > a.menuToggle:before {
                                background-image: url("images/bars.svg");
                                background-position: right center;
                                background-repeat: no-repeat;
                                content: '';
                                display: inline-block;
                                height: 3.75em;
                                vertical-align: top;
                                width: 2em;
                            }

                            @media screen and (max-width: 736px) {

                                #header nav > ul > li > a.menuToggle {
                                    padding: 0 1.5em;
                                }

                                    #header nav > ul > li > a.menuToggle span {
                                        display: none;
                                    }

                            }

                        @media screen and (max-width: 736px) {

                            #header nav > ul > li > a {
                                padding: 0 0 0 1.5em;
                            }

                        }

                    #header nav > ul > li:first-child {
                        margin-left: 0;
                    }

        #header.alt {
            background: transparent;
        }

            #header.alt h1 {
                -moz-pointer-events: none;
                -webkit-pointer-events: none;
                -ms-pointer-events: none;
                pointer-events: none;
                opacity: 0;
            }


.logo_menu {
    margin-bottom: 30px;
}

a.menuToggle {
    text-decoration: none;
}

a.menuToggle span {
    padding-left: 4px;
}

Answer 1

如果您想要将元素绝对放在元素之上，您希望将父元素设置为position:relative并将子元素放在父元素中。

<div class="parent">
   <a class="child">Child</a>
</div>

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 2;
  top: 0; //style to taste
  left: 0; //style to taste
}

链接（高于所有div的href）

1 个答案: