Html Can'；t使用div元素的绝对位置获取z索引

如果你看一下我正在设计的这个网站（），就会发现div元素的z索引有问题。点击左下角的鹳宝宝图片。在展开图像中有一个关闭按钮，隐藏在滑动按钮下。 my main.css的代码是：

    #SlidingButtons {display:block;overflow:hidden;position:absolute;left:320px;top:130px;width:840px;height:800px;z-index:4;}
    #Points {display:block;overflow:hidden;position:absolute;left:0px;top:170px;width:600px;height:730px;z-index:3;}

滑动按钮在右边 点是指鹳图像和左侧的可选点

我该如何在滑动按钮上方获得展开图像？

---

将滑动按钮的不透明度设置为.99不起作用。

Z-index是出了名的棘手和挑剔，如果你不是100%使用它的话。试试这个

#Page {
    overflow: hidden;
    position: relative;
    height: 775px;
    z-index: 10;
}

编辑：从头开始，整个web结构就是问题所在。除非需要，否则尽量不要使用Z索引

不过，在使用z-index时，这里有一点建议。Z索引仅适用于同级元素

<div>

    <div class="one">

        <div class="four"></div>

    </div>

    <div class="two"></div>

    <div class="three"></div>

</div>

---

在本例中，div.four将显示为低于div.two，因为div.four的父级的z索引低于div.two。由于z索引仅适用于同级元素，因此即使元素具有更高的z索引，但它位于子元素中，它的屏幕z索引也不会高于具有设置的z索引的最顶层父元素。

它似乎在做您希望它做的事情。你用的是什么浏览器？IE11…有什么问题吗？你觉得还好吗？我只能在将slidingbuttons z-index设置为-1时让它工作，但随后slidingbuttons停止工作。我使用的是Chrome，它工作得很好。现在不是了。你一直在做改变吗？这是我在一个多小时的搜索中发现的最清楚的z-index工作原理的解释。

.one{
z-index:1;
}

.two{
z-index:10;
}

.three{
z-index:100;
}

.four{
z-index:1000;
}