个人中心
gpt4 book ai didi

html - 如何强制 HTML5/CSS3 导航菜单覆盖内容

转载 作者：太空宇宙 更新时间：2023-11-04 10:38:50 26 4
gpt4 key购买 nike

我试图将我的导航菜单强制置于内容之上。我使用了 z-index 和 overflow = visible。但它不起作用。我不想使位置相对，因为菜单会将内容向下推。我只想让菜单覆盖内容。下面是代码。谢谢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Nav</title>
    <link href="nav.css" rel="stylesheet"/>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app="tabApp" >
  <nav>
    <ul> <span>The app</span>
        <li class="sub">
            <a href="shop.html">Version</a>
            <ul>
                <li class="sub">
                    <a href="#">V2</a>
                    <ul ng-controller="V2Ctrl">
                        <li ng-repeat = "v2 in V2s">{{v2}}</li>
                        <li><a href="one.html">One</a></li>
                    </ul>
                </li>
                <li class="sub">
                    <a href="#">V3</a>
                    <ul ng-controller="V3Ctrl">
                        <li ng-repeat = "v3 in V3s">{{v3}}</li>
                        <li><a href="one.html">One</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="javascript:alert('What are you talking about?');">About</a></li>
    </ul>
  </nav>
  <article class="tabs">

      <section id="home">
        <h2><a href="#home">Home</a></h2>
        <p>This content appears on tab Home.</p>
      </section>

      <section id="table">
        <h2><a href="#table">table</a></h2>
        <p>This content appears on tab tab.</p>
      </section>

      <section id="col">
        <h2><a href="#col">Columns</a></h2>
        <p>This content appears on tab Columns.</p>
      </section>

  </article>

  <aside align="left">
    aside of content
  </aside>

  <footer align="bottom">
    <span>"Copyright&copy; 2016</span></span>
  </footer>

  <script>
      var app = angular.module('tabApp', []);
      app.controller('V2Ctrl', function($scope) {
          $scope.V2s = ['  10','  11','  12','  13','  14','  15','  16','  17','  18','  19','  20','  21','  22','  23','  24','  25','  26','  27','  28'];
      });  
      app.controller('V3Ctrl', function($scope) {
          $scope.V3s = ['  ','   SP1','   SP2','   SP3','   SP4','   SP5','   SP6','   SP7','   SP8','   SP9','   SP10'];
      });  
  </script>

</body>
</html>

和 CSS

#logo{
    position: absolute;
    right:10px;
    bottom: 10px;
}
body{
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
    text-align: right;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
    padding: 0;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
na ul span {
    width: 300px
    margin-top: 250%;;
}
nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}

nav > ul > li > a {
    color: #aaa;
    display: block;
    line-height: 1em;
    /*padding: 0.5em 2em;*/
    padding: 0.2em 3em;
    text-decoration: none;

}

nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #bbb;

}

nav li > ul li{
    display: block;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 1em;
    padding: 0.2em 2em;
    text-decoration: none;
}

nav li:hover {
    background-color: #666;
}
nav li:hover > ul{
    position:absolute;
    display : block;
}
nav li > ul > li ul  {
    display: none;
    background-color: #888;
}
nav li > ul > li:hover > ul  {
    position:absolute;
    display : block;
    margin-left:100%;
    margin-top:-3em;
}

nav ul > li.sub{
    background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
    z-index: 5; 
    overflow: visible;
}

nav ul > li.sub li.sub{
    background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
    z-index: 5; 
    overflow: visible;
}

/*****************************************************************************/
article.tabs
{
    position: relative;
    display: block;
    width: 1200px;
    height: 500px;
    margin: 2em auto;
}
article.tabs section
{
    position: absolute;
    display: block;
    left: 0;
    width: 1200px;
    height: 500px;
    padding: 10px 20px;
    background-color: #ddd;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    z-index: 0;
}
article.tabs section:first-child
{
    z-index: 1;
}
article.tabs section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    width: 120px;
    height: 1.5em;
    top: -1.5em;
    left: 10px;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
    border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
    left: 132px;
}

article.tabs section:nth-child(3) h2
{
    left: 254px;
}

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
    color: #333;
    background-color: #fff;
    z-index: 2;
}
article.tabs section,
article.tabs section h2
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

footer 
{
  background-color: #333;
  width: 100%;
  bottom: 0;
  position: fixed;
}

我将代码添加到 jsfiddle。

https://jsfiddle.net/3nkf8ken/1/

最佳答案

在 nav 和 nav ul 元素上设置 z-index 属性。

https://jsfiddle.net/masterspambot/hy3awqq9/1/

关于html - 如何强制 HTML5/CSS3 导航菜单覆盖内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35977343/

26 4 0
文章推荐： python - 适用于 python 3.x 的 Asterisk ami
文章推荐： java - 使用 url 防止重定向
文章推荐： python - 检查字符串是否包含正则表达式的模式
文章推荐： linux - 如何启动 QGIS？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com