Question

90

Javascript Absolute Positioning

rated 0 times [ 91] [ 1] / answers: 1 / hits: 39480 / 14 Years ago, thu, january 27, 2011, 12:00:00

I am trying to create a new div layer using JavaScript that can be absolutely positioned on the page after page load.

My code is as follows:

<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>

The page can be seen here.

The problem I am having is that the div is sitting after the original body content rather than over it on a new layer. How can I remedy this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tammyb

Add To Favorites

Follow

Total Points: 278

Total Questions: 101

Total Answers: 103

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

answered 14 Years ago billier · Accepted Answer

Try with this instead:

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);

The reason it was not working is that you used x and y css properties (which don't exist) instead of left and top. Also, for left, top, width, height you had to specify a unit (e.g. px for pixels).