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">と が必要です 。しかし、私が得ているのはボタンの前です。button<div id="div1"><div id="div2"><div id="div1">

その理由は、が背後にあるにbuttonネストされているためだと思います。リストラ以外に何かアイデアはありますか？<div id="div2"><div id="div1">

ページを下にスクロールすると、ボタンがテキストの上にスクロールするようにこれを行っています。

テキストはボタンの幅よりも長いので、ボタンの横から余分なテキストが出ないように、空白の div を行います。

この質問に対する答えは、私の疑いを裏付けるものだと思いますが、これを回避したいと思います。基本的にbuttonは前div1とdiv1前が欲しいですdiv2。

4

2 に答える 2

2

ここで役立つテクニックを 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/

于 2013-06-20T17:53:34.593 に答える
1

ボタンを一番上に表示するには、から削除position: absolute;しdiv2ます。

これは、あなたがやろうとしている他のことを壊すかもしれませんが...

margin-top: 100px;コンテキストに応じて、ポジショニングをそのまま維持する可能性のある a を指定することもできます。

.net コードを変更して HTML 構造を変更できる場合、これはより簡単になる可能性があります。

于 2013-06-20T17:51:58.077 に答える