1

我想知道是否有修复。

<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">我想要buttonand<div id="div1">在前面 <div id="div2">。但我得到的是<div id="div1">按钮前面。

我假设原因是因为button嵌套在<div id="div2">that is behind 中<div id="div1">。除了重组，有人有什么想法吗？

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

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

这个问题的答案证实了我的怀疑，但我想解决这个问题。基本上我想要button在前面div1和div1前面div2。

4

2 回答 2

2

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

使用您现有的 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/

于 2013-06-20T17:53:34.593 回答
1

要获得顶部的按钮，请position: absolute;从div2.

这可能会破坏您尝试做的其他事情，但是...

margin-top: 100px;根据您的上下文，您仍然可以给出可能保持定位不变的 a 。

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

于 2013-06-20T17:51:58.077 回答