【问题标题】:What I have to do that menu will be on the top side of slider?我必须做的那个菜单将在滑块的顶部?
【发布时间】:2021-05-27 09:17:59
【问题描述】:

我的移动菜单和滑块有问题。我希望菜单位于滑块的顶部。但是当我点击菜单图标时,菜单没有显示。我尝试了很多方法,但我仍然没有解决问题。先感谢您。 ` 洛雷姆

<body>
   <header>
    <nav>
        <input type="checkbox" id="check">
        <label for="check">
            <i class="fas fa-bars" id="btn"></i>
            <i class="fas fa-times" id="cancel"></i>
        </label>
<img src="/img/logo.svg" alt="logo">
        <ul>
            <li class="el1"><a href="#">lorem</a></li>
            <li class="el1"><a href="#">lorem</a></li>
            <li class="el1"><a href="#">lorem</a></li>
            <li class="el1"><a href="#">lorem</a></li>
        </ul>
    </nav>
    </header>
    <div class="container">
        <div class="slider">
            <div class="slide slide1">
                <div class="caption">
                    <h2>Slide1</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
                </div>
            </div>
            <div class="slide slide2">
                <div class="caption">
                    <h2>Slide2</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
                </div>
            </div>
            <div class="slide slide3">
                <div class="caption">
                    <h2>Slide3</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
                </div>
            </div>
            <div class="slide slide1">
                <div class="caption">
                    <h2>Slide1</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
                </div>
            </div>
        </div>
    </div>
</body>

代码:https://codepen.io/FilipoV/pen/ExNowKM

【问题讨论】:

    标签: html css mobile menu slider


    【解决方案1】:

    您将使用 z-index:1;在你的 CSS 中。

    nav ul {
     float: right;margin-right: 25px;
      z-index: 1;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-02-13
      • 2015-08-05
      • 1970-01-01
      • 1970-01-01
      • 2012-03-31
      • 1970-01-01
      相关资源
      最近更新 更多