Question

我一直在网站上工作，其中有一个随页面滚动一起移动的导航栏。我在右栏中有一个图像滑块，当我向下滚动它时会出现在导航栏上方。

我一直在嘲笑为什么会这样做。滑块中的图像也没有填满......

我还有一个应该停留在页面底部的页脚，但是当我更改它的高度时它会移动。我在页面换行中设置了一个边距，我在更改页脚高度时会更改以尝试修复此内容，但它似乎不起作用。

           <div class="page-wrap">
           <header class="topbar topbar-blue">
            <div class="topbar-left">
            <div class="topbar-logo">
             <a href="/">
                <img class="mysite-logo" src="images/logo/logo2.png" alt="Mysite Logo" />
                <!-- MySite main log here -->
            </a>
          </div>

        </div>
       <nav class="topbar-nav">
        <ul class="topbar-nav-main">
            <li id="home-nav"><a href="index.html">Home</a></li>
            <li id="design-nav"><a href="design.html">Design</a></li>
            <li id="shop-nav"><a href="store.html">Shop</a></li>
            <li id="gallery-nav"><a href="gallery.html">Gallery</a></li>
            <li id="about-nav"><a href="about.html">About Us</a></li>
        </ul>
       <div class="topbar-right">
      <div class="hamburger"><img src="images/nav-icon.png"></div>
      <div class="hamburger2"><a href="login.html">Login</div>
      <div class="hamburger3"><img src="images/cart-icon.png"></div>
      </div>
      </nav>

    </header>

Answer 1

在.topbar类中设置z-index。

.topbar {
position: fixed;
width: 100%;
top: 0;
height: 100px;
font-size: 19px;
font-weight: 700;
z-index:1;      
}

对于图像，请从#slideshow-inner>ul>li

中删除宽度

#slideshow-inner>ul>li {
/*width: 20%;*/  /*Removed this*/
height: 320px;
float: left;
position: relative;
}

<强> Demo

显示移动导航栏

1 个答案: