Question

我用单选按钮观察这种奇怪的行为。每当我设置父div的z-index时，我都无法选择单选按钮。

这是小提琴链接：http://jsfiddle.net/x7rm63n9/2/。尝试选择主框内的按钮。

主要div的css样式是：

.main_box
{
 position: relative;
 background-color: #444;
 width: 65%;
 margin: 30px auto;
 height: 450px;
 z-index: -6;     /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/
 border: 12px solid #fff;
}

为什么会这样？如果没有改变z-index，有没有解决方法呢？

我尝试设置简单的演示。（http://jsfiddle.net/juruf6a8/1/）这里工作正常。

提前致谢，

Answer 1

试试这个我做了更新，它正在我的工作。 http://jsfiddle.net/x7rm63n9/4/

以下是您需要做的事情：

- 删除＆＃34;主框＆＃34;的z-index：-6格

- 将横幅div包含在另一个名为＆＃34; banner-container＆＃34;的div中。并为其编写此代码

.banner-container{
    z-index:1;
    position:relative;
}
.banner-container:after{
    clear:both;
    content:'';
    display:block;
}

Answer 2

如果必须保持main_box本身的z-index为-6，你可以让main_box内的单选按钮更高。

.main_box, input[type=radio]
{
  z-index:0;
}

http://jsfiddle.net/x7rm63n9/3/

无法选择单选按钮：z-index问题？

2 个答案: