Question

我有一个带有很厚边框的div，我想在边框的右上角有一个关闭按钮，而不是div。我遇到的问题是，无论我放置什么z-index，边框总是在我的关键按钮div之上。我已经尝试将边框设置在div的内部，但同样的问题仍在发生。有什么建议吗？

谢谢！

.aboutcontainer{
    position: relative;
    width: 55%;
    height: 70%;
    margin: auto;
    margin-top: 6%;
    background: white;
    z-index: 3;
    border: 20px solid black;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;

    box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
    -moz-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
    -khtml-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
    -webkit-box-shadow: inset 0px 5px 2px black, 0px 5px 5px #333333;
}

.closeBtn {
    position: absolute;
    top: -10px;
    right: -10px;
    border: solid 1px red;
    z-index: 4;
    cursor: pointer;
}

Answer 1

您的overflow: auto;标记隐藏了主div之外的所有内容，包括边框顶部的内容。删除它，按钮将显示。

Answer 2

删除overflow:auto，此处不需要z-index。将width和height提供给内部div以查看效果。

<强> DEMO

Answer 3

从.aboutcontainer中删除边框。将它放在另一个 div 中，并为该父容器添加一些填充和背景颜色，以创建边框效果。将 .aboutcontainer 和 .closeBtn 放在该div中，现在您可以将关闭按钮放在任何您想要的地方，同时保持.aboutContainer的溢出属性不变。

在厚的Div边界顶部的接近的按钮

3 个答案: