JavaScriptの絶対配置

JavaScriptを使用して新しいdivレイヤーを作成しようとしていますが、これはページの読み込み後にページに配置することができます。次のようにJavaScriptの絶対配置

私のコードは次のとおりです。

<html><head> 
<script type="text/javascript"> 
function showLayer() { 
var myLayer = document.createElement('div'); 
myLayer.id = 'bookingLayer'; 
myLayer.style.position = 'absolute'; 
myLayer.style.x = 10; 
myLayer.style.y = 10; 
myLayer.style.width = 300; 
myLayer.style.height = 300; 
myLayer.style.padding = '10px'; 
myLayer.style.background = '#00ff00'; 
myLayer.style.display = 'block'; 
myLayer.style.zIndex = 99; 
myLayer.innerHTML = 'This is the layer created by the JavaScript.'; 
document.body.appendChild(myLayer); 
} 
</script> 
</head><body bgcolor=red>This is the normal HTML content. 
<script type="text/javascript"> 
showLayer(); 
</script> 
</body></html>

ページはhereを見ることができます。

私が抱えている問題は、divが新しいレイヤーではなく元のボディコンテンツの後ろに座っていることです。どのように私はこれを改善することができますか？

出典

2011-01-27 Mike Poole

が、この代わりにして試してみてください：それは働いていなかった

var myLayer = document.createElement('div'); 
myLayer.id = 'bookingLayer'; 
myLayer.style.position = 'absolute'; 
myLayer.style.left = '10px'; 
myLayer.style.top = '10px'; 
myLayer.style.width = '300px'; 
myLayer.style.height = '300px'; 
myLayer.style.padding = '10px'; 
myLayer.style.background = '#00ff00'; 
myLayer.innerHTML = 'This is the layer created by the JavaScript.'; 
document.body.appendChild(myLayer);

理由は、あなたの代わりにleftとtopの（存在しない）xとy CSSプロパティを使用していることです。また、左、上、幅、高さについては単位を指定する必要があります（ピクセルの場合はpx）。

出典

2011-01-27 10:13:11 arnaud576875

ありがとうございました。あなたが推測できるように、私は他の言語の構文にもっと慣れています。今はうまくいきます。 –

は上部と左ではなく、xとyを使用して位置を設定

、これらを試してみてください。
絶対配置要素は、位置スタイルも持つものの中に含める必要があります。通常のトリックはposition：relativeのコンテナを作成することです。
幅、高さ、上、左などのスタイルを+ 'px'で設定する必要があります。
すでにブロック要素であるため、div：display：blockを設定する必要はありません。

出典

2011-01-27 10:23:35 leebriggs

＃2そうではありません。親の「位置」は、座標の決定方法のみを決定します。 – kapa

JavaScriptの絶対配置

答えて

関連する問題