个人中心
gpt4 book ai didi

HTML 侧边栏被内容覆盖

转载 作者：太空宇宙 更新时间：2023-11-03 23:02:22 25 4
gpt4 key购买 nike

我的侧边栏被主标签菜单覆盖。我已经把它放在 jsfiddel 里了。

https://jsfiddle.net/x0j97dtk/

它适用于 firefox，但不适用于 chrome。它在 jsfiddle 中也不起作用。有什么想法吗？

这是HTML

<!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="App" >
  <nav>
    <ul> <span>My App</span>
        <li class="sub">
            <a href="#">Version</a>
            <ul>
                <li class="sub">
                    <a href="#">V2</a>
                    <ul ng-controller="V2Ctrl">
                        <li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
                    </ul>
                </li>
                <li class="sub">
                    <a href="#">V3</a>
                    <ul ng-controller="V3Ctrl">
                        <li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  </nav>
      <aside class="side" align="left">
         <table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
               <tr ng-repeat = "table in tables">
                 <td><button id = "{{table}}" width = "70">{{table}}</button></td>
               </tr>
         </table>
      </aside>
  <article class="tabs">


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

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

      <section id="home">
        <h2><a href="#home">Home</a></h2>
        <p>This content appears on tab Home. lfkdgl;k  lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj  dskfj;kj sdfkj fkdj;lfkjsd;lkfj   sdkfj ;slkj sdfj;lskjf   skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
      </section>

  </article>


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

  <script>
    var app = angular.module('App', []);
    app.controller('TableCtrl', function($scope) {
        $scope.tables = ['category','supplier','customer','dept','empl','orders'];
    });
    app.controller('V2Ctrl', function($scope) {
        $scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.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;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 9999;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9999;
    text-align: center;
}
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;
}

/*****************************************************************************/
aside {
    display: block;
    position: absolute;
  width: 80px;
  height: 550px;
  padding-right: 0;
  margin: 0;
  align: left;
  overflow: auto;
  background-color: lightblue
}
/*
article.side aside
{
    width: 90px;
    height: 500px;
    margin: 2em auto;
    background-color: red;
  z-index:100;
}*/
article {
/*  position: relative; */
}

article.tabs
{
    position: relative;
    display: block;
    width: 1100px;
    height: 500px;
    margin: 2em auto; 
        background-color: green;

}
article.tabs section
{
    position: absolute;
    display: block;
    left: 0;
    width: 1100px;
    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 
{
    color: #999;
  text-align:center
  background-color: #333;
  width: 100%;
  bottom: 0;
  position: fixed;
}

最佳答案

您有一个宽度为 80 像素的左侧边栏。所以对于不覆盖的内容就是把它往右推80px。

你知道 padding 和 margin 的作用吗？

您有一篇(在本例中)带有类选项卡的文章。- 边距是文章周围的空间。- 您可以使用 padding 为文章的侧面到内部元素留出空间。

现在您有 margin :2em auto如果您使用两个值指定边距，第一个值用于左侧和右侧，第二个值用于顶部和底部。由于您可能只想要左边的边距，您可以将其更改为两个不同的值:

左边距:80px；或者边距:0px 0px 0px 80px第二种描述边距的方法是将所有边距设置在一行中边距:右上角左下角；

希望这能正确解释您的问题。

关于HTML 侧边栏被内容覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35993376/

25 4 0
文章推荐： html - 让 div 使用最高 child 的高度
文章推荐： ruby - 安装 opencv GEM - extconf.rb 错误
文章推荐： c++ - 特定对象的立体对应和 3D 位置 (ROI)
文章推荐： CSS:定位
太空宇宙
个人简介

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

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