Question

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

正如您所看到的，页面上有多个包含内容的div。当点击div的内部（或者事实上编辑，但那不是biggy）时，应该出现一个保存按钮。看着小提琴，你可以看到按钮在父div后面也是可见的。

我已经能够或者在整个时间内把它拿到前面，或者隐藏整个时间（如果我使用z-index=-20;左右。

现在，问题是如何在onclick事件之前隐藏按钮，并在滑动时显示？所以它看起来好像是一个下滑的标签。

Answer 1

元素不能位于父元素后面。无论您分配给它的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/

Answer 2

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

子/父元素中的z-index问题

2 个答案: