这是我的原始帖子的重新编辑。

备注：

i（br）现在让身体滚动。

否则代码正是我想要的。

我读了一下，发现父母关系对z-index的效果不好，所以从我收集的内容来看，我觉得div都是兄弟姐妹。

到目前为止，我的z-index是一个2层设置，100是第一层，10是第一层内的第二层。

我的选项卡选择器不会显示我最终将使用css3转换编码作为tabBar类的连续幻灯片，但是现在我需要知道如何让它们出现。

<head style="margin:0;">

  <style>

    .tabBarbackground {
                       background-color:rgb(56, 56, 56);
                       width:1440px;
                       height:50px;
                       position:fixed;
                       left:0px;
                       top:0px;
                       z-index:110;
                      }

    .tabBargradiant {
                     background:linear-gradient(0deg,rgba(34,34,34,1),rgba(34,34,34,0),rgba(34,34,34,1));
                     width:1440px;
                     height:50px;
                     position:fixed;
                     left:0px;
                     top:0px;
                     z-index:120;
                    }

    .tabSelector {
                  opacity:0.2;
                  background:linear-gradiant(0deg,rgba(204,147,90,1),rgba(204,147,90,.5),rgba(204,147,90,1));
                  width:480px;
                  height:50px;
                  position:fixed;
                  left:0px;
                  top:0px;
                  z-index:210;
                 }

    .tabSelectordefinition {
                            opacity:0.4;
                            background-color:(rgba(204,147,90,.8));
                            width:480px;
                            height:10px;
                            position:fixed;
                            left:0px;
                            top:50px;
                            z-index:220;
                           }

    .buttonFrame1 {
                   width:480px;
                   height:50px;
                   background-image:url("http://i1383.photobucket.com/albums/ah281/ScrapBookSearch/YellowTvGuide_zpsvtnwvwui.png");
                   background-color:transparent;
                   background-repeat:no-repeat;
                   background-size:contain;
                   background-position:center;
                   border:none;
                   position:fixed;
                   left:0px;
                   top:0px;
                   z-index:410;
                  }

    .buttonFrame2 {
                   width:480px;
                   height:50px;
                   background-image:url("http://i1383.photobucket.com/albums/ah281/ScrapBookSearch/WatchSeries_zpsgppfggg9.png");
                   background-color:transparent;
                   background-repeat:no-repeat;
                   background-size:contain;
                   background-position:center;
                   border:none;
                   position:fixed;
                   left:480px;
                   top:0px;
                   z-index:420;
                  }

    .buttonFrame3 {
                   width:480px;
                   height:50px;
                   background-image:url("http://i1383.photobucket.com/albums/ah281/ScrapBookSearch/ZmovieFakeReel_zpssqqo7bty.png");
                   background-color:transparent;
                   background-repeat:no-repeat;
                   background-size:contain;
                   background-position:center;
                   border:none;
                   position:fixed;
                   left:960px;
                   top:0px;
                   z-index:430;
                  }

  </style>

</head>

<body style="margin:0;">

  <div class="tabBarbackground">

  </div>

  <div class="tabBargradiant">

  </div>

  <div class="tabSelector">

  </div>

  <div class="tabSelectordefinition">

  </div>

  <button class="buttonFrame1">

  </button>

  <button class="buttonFrame2">

  </button>

  <button class="buttonFrame3">

  </button>

  <p> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br> i <br>


</body>

任何能够解释此错误的人请告诉我？

Answer 1

你的描述并不完全清楚，但我认为你可能会以错误的方式解决这个问题。对于这样的事情，我倾向于单独依赖位置规则，使用position：relative和position：absolute来将元素放在彼此之上。如果由于某种原因，位置调整是不可能或不实际的，我只求助于z-index。尽管z-indexing可能存在问题，但主要是由于跨浏览器兼容性，这是正确的。

但在这种情况下，你的问题似乎是单词渐变的简单拼写错误：

拼错：

background:linear-gradiant(0deg,rgba(204,147,90,1),rgba(204,147,90,.5),rgba(204,147,90,1));

正确拼写：

background:linear-gradient(0deg,rgba(204,147,90,1),rgba(204,147,90,.5),rgba(204,147,90,1));

但请在此处查看您的代码：link

我在.tabSelector类中添加了一个简单的背景颜色，然后出现了背景。不确定你在那里的定位是否合适，但根据你的代码，这就是你得到的。

如何更正此z-index和按钮图片？

这是我的原始帖子的重新编辑。

1 个答案: