0

我不是 z-index 用户，我在网上看到很多 z-index 问题是其他元素没有正确的属性。可惜我也不擅长！无论如何，代码在这里：jsfiddle.net/B3N2Q。

如您所见，页面上有多个包含内容的 div。当一个 div 的内部被点击（或者事实上被编辑，但这没什么大不了的）时，应该会出现一个保存按钮。查看小提琴，您可以看到按钮应该在父 div 后面时也是可见的。

我一直能够或一直把它放在所有东西的前面，或者一直隐藏起来（如果我使用 az-index=-20;左右。

现在，问题是如何让按钮在 onclick 事件之前隐藏，并在向下滑动时可见？所以它看起来好像是一个向下滑动的选项卡。

4

2 回答 2

2

元素不能在父元素之后。无论您分配给它的 z-index ，它总是在它之上。

您应该将按钮移到 div 之外以正确应用 z-index。并将您的 div 的背景设置为默认情况下它们是透明的：

<div>
    <div style='position: relative; border:1px solid black; background-color: white; padding: 10px 10px 0px 10px;width:896px; height: 200px;z-index:50;'>
      your content here
      ...
    </div>
    <div class="button" style='width:100px;margin: -35px auto;'>
        <input type='button' style='border-top:none;border-top-left-radius:0px;border-top-right-radius:0px;' value='save' title='save this shit' />
    </div>
</div>

示例：http: //jsfiddle.net/uYGEd/1/

于 2013-06-02T19:13:53.520 回答
1

一个子元素不能出现在它的父元素后面，除非它是绝对定位的，不管它是什么z-index。不过，隐藏“保存”按钮的解决方案非常简单。您可以拥有它display: none，并slideDown在它变得可见时拥有它。另一种解决方案是将保存按钮放在与其容器不同的 div 中，以便您可以z-index适当地使用，但我认为这会更复杂。

于 2013-06-02T18:51:12.723 回答