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

Question

所以我是编码的新手，过去 2 天我一直在玩，到目前为止我有这个设置...

这是对我原来的 post 的重新编辑。

备注：

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 class 添加了纯背景色，然后背景出现了。不确定你在那里的定位是否可取，但根据你的代码，这就是你得到的。

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

How do I correct this z-index and button pics?

html

css

background

这是对我原来的 post 的重新编辑。