Question

我想知道是否有修复。

<div id="div1" style="position: fixed; top:0; z-index:1; background:white;">
 </div>

<div id="div2" style="position: absolute; top:100; z-index:0;">
    <table>
        <tr>
            <td>
              <input type="button" style="position: fixed; top:50; z-index:2;" />
            </td>
        </tr>
        <tr>
            <td>
                some text that is longer than the width of the button
            </td>
        </tr>
    </table>
</div>

我希望button位于<div id="div1">前面，我希望button和<div id="div1">位于<div id="div2">前面。但我得到的是<div id="div1">在按钮前面。

我假设原因是因为button嵌套在<div id="div2">之后的<div id="div1">中。除重组外，任何人都有任何想法吗？

我这样做是为了当我向下滚动页面时按钮将在文本顶部滚动。

文本比按钮的宽度长，所以我使用空格div，这样就不会看到按钮侧面出现的额外文本了。

这个question的答案证实了我的怀疑，但我想解决这个问题。基本上我希望button前面的div1和div1前div2前面{{1}}。

Answer 1

这是一种可能有用的技术。

使用您现有的HTML，我取出了您的内联样式并使用了以下CSS：

#div1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: gray;
    z-index: 1;
}
#div2 {
    position: absolute;
    top: 50px;
}

以及以下jQuery：

$('#div2 input').prependTo($('#div1'));

诀窍是使用jQuery的DOM操作函数#div2将按钮移出#div1并进入.prependTo()。

在此之后设置CSS的样式非常简单。

小提琴演示：http://jsfiddle.net/audetwebdesign/Gv6XQ/

Answer 2

要将按钮置于顶部，请从position: absolute;移除div2。

这可能会打破你想要做的其他事情，但是......

根据您的具体情况，您仍然可以提供可能保持定位完整的margin-top: 100px;。

如果您可以更改.net代码以更改HTML结构，这可能会更容易。

如何在div前面强制父div内部的按钮。我试过z-index无济于事

2 个答案: