上部のdivを作成する他のすべてのコンテンツを押し下げよう

Question

私はdivをページの上に表示し、他のすべてのコンテンツをプッシュするfirefoxのプラグインをプログラミングしています。私は頭のタグの前に置こうとしましたが、うまくいかないようです。

マイコード：

var allDivs = document.getElementsByTagName('div'); 
var headTag = document.getElementsByTagName('head')[0]; 

if (allDivs.mainplugindiv) 
{ 
    alert("!!! Plugin LLIBrowser is running !!!"); 
} 
else 
{ 
    var div = document.createElement('div'); 
    div.id='mainplugindiv'; 
    div.style.position = 'absolute'; 
    div.style.zIndex = '100'; 
    div.style.width = '100%'; 
    div.style.height = '150px'; 
    div.style.background = '#313192'; 
    div.style.color = 'white'; 
    div.innerHTML="<script type=\"text/javascript\" src="+self.options.angularLib+"></script>"+ 
"<script type=\"text/javascript\" src="+self.options.angularApp+"></script>"+ 
    "<form style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%;align: middle; visibility: visible\">"+ 
    "<label for=\"video\" style=\"color: white\"> <input type=\"checkbox\" checked=\"checked\" name=\"video\" value=\"video\" id=\"video\" /> Video</label>"+ 
    "<label for=\"forum\" style=\"color: white\"> <input type=\"checkbox\" checked=\"checked\" name=\"forum\" value=\"forum\" id=\"forum\" /> Forum</label>"+ 
    "<img src="+self.options.closeImg+" alt=\"Help\" style=\"width:20px;height:20px;\" align=right onclick=\"var youSure=confirm('Are you sure you want to close the plugin?'); if (youSure){var element = document.getElementById('mainplugindiv');element.outerHTML = '';delete element;}\">"+ 
    "<img src="+self.options.helpImg+" alt=\"Close\" style=\"width:20px;height:20px;\" align=right onclick=\"alert('LLIBrowser')\">"+ 
    "</form>"+ 
    "<div style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%; height: 50%; align: middle; background-color:#75bbf7; visibility: visible\">"+ 
    "<div ng-show=\"tab == 1\">"+ 
     "<form>"+ 
     "<h3 style=\"color: white; align: center\">Video1 Video2 Video3 Video4</h3>"+ 
     "</form>"+ 
    "</div>"+ 
    "<div ng-show=\"tab == 2\">"+ 
     "<form>"+ 
     "<h3 style=\"color: white; align: center\">Forum1 Forum2 Forum3 Forum4</h3>"+ 
     "</form>"+ 
    "</div>"+ 
    "</div>"+ 
    "<form style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%;align: middle; background-color:#313192; visibility: visible\">"+ 
    "<a href=\"#video\" style=\"color: white; background-color: #75bbf7; height: 15px; padding: 5 auto\" ng-click=\"tab = 1\">Video</a>"+ 
    "<a href=\"#forum\" style=\"color: white; background-color: #313192; height: 15px; padding: 5 auto\" ng-click=\"tab = 2\">Forum</a>"+ 
    "</form>"; 
    headTag.parentNode.insertBefore(div, headTag); 

ありがとう！

Answer 1

相対的に設定して両側を絶対に設定する代わりに、位置を設定するのではなく、

div.style.position = 'relative'; 
div.style.clear = 'both'; 

これは動作するはずです。

編集：代わりにheadタグに追加するのではなくyourbody

document.body.insertBefore(div,body.firstChild); 

の最初の子作り