For some reason I'm unable to set the "top" and "left" CSS attributes using the following JavaScript.
var div = document.createElement('div'); div.style.position = 'absolute'; div.style.top = 200; div.style.left = 200; document.body.appendChild(div);
Using Firebug I can see that the div
gets the position
set to "absolute"
but the top
and left
attributes are not set!
This is for Firefox 3.6.
Types of positioningThe top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. An absolutely positioned element is an element whose computed position value is absolute or fixed .
The left property in CSS is used to specify the horizontal position of a positioned element. It has no effect on non-positioned elements. Note: If position property is absolute or fixed, the left property specifies the distance between the element left edge and the left edge of its containing block.
In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top. Most of the time you'll find that a z-index of 1 or 2 will suffice for your needs.
Your problem is that the top
and left
properties require a unit of measure, not just a bare number:
div.style.top = "200px"; div.style.left = "200px";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With