0

insertBeforeを使用して別のdivの上にdivを挿入しようとしていますが、これまでのところ、正常に機能しています。しかし、それは私がそれを上に挿入しようとしているdivを押し下げます、そして私は可能であればそれを防ぎたいです。jsFiddleの例と一緒に使用しているコードは次のとおりです。

JS：

var innerDiv = document.getElementById('innerDiv');

function addButtons() {
    var buttons = document.createElement('div'),
        outerDiv = document.getElementById('outerDiv');

    buttons.innerHTML = '<input type="button" id="button" value="button" />';  

    outerDiv.insertBefore(buttons, outerDiv.childNodes[0]);        
}

innerDiv.onfocus = addButtons;​

HTML：

<div id="outerDiv" class="outerDiv">
     <div id="innerDiv" contenteditable="true">Testing</div>
</div>

CSS：

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
}​

jsFiddleの例

ご協力ありがとうございました

4

3 に答える 3

1

それは正常です。はouterDiv位置が固定されているため、画面上の現在の位置を維持しますが、コンテンツは通常のレイアウトアルゴリズムに従ってフローされます。buttonの前にを挿入しているinnerDivので、ボタンは内部の新しい最初の子にouterDivなり、の先頭の位置になりouterDivます。（ 2番目の引数として指定する子要素の前に、メソッドを呼び出している要素内insertBeforeに挿入されることをご存知ですか？）

新しい要素がレイアウトに影響を与えないようにする場合は、スタイルを追加する必要があります。例：

#button {
    position: absolute;
    top: -2em;
}
于 2013-01-03T04:36:49.277 に答える
0

innerDivを絶対位置に設定してみてください：デモ

.innerDiv{
    position: absolute;
    top: 0px;
}

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
    padding-top: 30px;
}
于 2013-01-03T04:43:56.360 に答える
0

これは、ページのレスポンシブを維持し、IDの上に要素を追加するための最良の方法の1つだと思います。

フィドルをチェック

CSSにいくつか変更を加えました

.outerDiv {
    position: fixed;
    top: 80px;
    left: 100px;
}    

#innerDiv {
    position: fixed;
    top: 100px;
}

.outerdivが取り上げられ、の#innerdivすぐ下に配置されます.outerdiv。IDの上に要素を追加しているようです。これは必要なものです。

于 2013-01-03T05:05:05.877 に答える