Question

如果您看一下我正在设计的这个网站（http://babblers.in/main.html），div元素的z-index存在问题。点击鹳＆amp;宝贝图片在左下方。扩展图像中有一个关闭按钮，隐藏在滑动按钮下方。我的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不起作用。

Answer 1

如果你不是百分之百的话，Z-index是出了名的狡猾和挑剔。试试这个。

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

编辑：抓一点，你的整个网络结构都是问题。除非你需要，否则尽量不要使用Z-Index。

虽然这是使用z-index时的建议。 Z-index仅适用于兄弟元素。

<div>

    <div class="one">

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

    </div>

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

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

</div>

使用以下CSS

.one{
z-index:1;
}

.two{
z-index:10;
}

.three{
z-index:100;
}

.four{
z-index:1000;
}

在这个例子中，div.four看起来会低于div.two，因为div.four的父级的z-index低于div.two。由于z-index仅适用于兄弟元素，即使元素具有较高的z-index但它位于子元素中，它也不会具有比其最顶级父元素更高的屏幕z-index。设置z-index。

无法使z-index与div元素的绝对位置一起工作

1 个答案: