Question

我想在初始条件标头in put textbox上设置div的位置。但该文本框在初始条件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 Demo

修改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;
}

z-index属性不起作用

1 个答案: