z-index属性不起作用

Question

我想在初始条件标题div上的in put textbox的位置中进行设置。 但是该文本框在初始条件div下被隐藏了。 z-index是否有替代方法 ？ 我也附上了CSS。

HTML：

<div id="initialCondHdr" class="initialCondHdr">Demo Experiment</div>
<div id="archiveTable_filter" class="dataTables_filter">
    <label>
        <input type="text" placeholder="Search" style="width:220px;height:30px;" />
    </label>
</div>

CSS：

#initialCondHdr {
    color:#043751;
    font-family:calibri;
    font-size:19px;
    line-height:42px;
    position:relative;
    text-indent:15px;
}
.dataTables_filter {
    float: left;
    left: 119px;
    margin: 12px 0 22px 12px;
    overflow: hidden;
    position: absolute;
    text-align: right;
    top: -20px;
    z-index: 5;
}

Answer 1

对我来说，您目前想做的还不是很清楚，但我认为您正在尝试将输入内容放在第一个div的顶部。

在这种情况下，您将必须更改HTML结构并按以下方式调整输入的位置：

JSfiddle演示

修改后的HTML

<div id="initialCondHdr" class="initialCondHdr">Demo Experiment
    <div id="archiveTable_filter" class="dataTables_filter">
        <label>
            <input type="text" placeholder="Search" style="width:220px;height:30px;"/>
        </label>
    </div>
</div>

修订的CSS

  #initialCondHdr{
        color:#043751;
        font-family:calibri;
        font-size:19px;
        line-height:42px;
        position:relative;
        text-indent:15px;
        color:red; /* visual reference only */
}
    .dataTables_filter{
        overflow: hidden;
        position: absolute;
        opacity:0.5; /* visual reference only */
        top:0;
        text-align: right;
        z-index: 1;
}