How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript


Tags: javascript,html,css,position

Problem :

I want to create a div element manually and later add some CSS styling to it using JavaScript. I created a div element and changed it's style with JavaScript. The problem is, some CSS styles do not work.

this is the fiddle preview

(color, background, width, height) those properties worked fine but the (zIndex, top, left) properties do not work. I want to know why this happens and how to correct it.

this is my JavaScript code:

function css()
{    
    var element = document.createElement('div');
    element.id = "someID";
    document.body.appendChild(element);

    element.appendChild(document.createTextNode
     ('hello this javascript works'));

    // these properties work
    document.getElementById('someID').style.zIndex='3';
    document.getElementById('someID').style.color='rgb(255,255,0)';
    document.getElementById('someID').style.background='rgb(0,102,153)';
    document.getElementById('someID').style.width='700px';
    document.getElementById('someID').style.height='200px';

    //these do not work
    document.getElementById('someID').style.left='500px';
    document.getElementById('someID').style.top='90px';
}

this is my relevant html code

<input type="submit" name="cssandcreate" id="cssandcreate" value="css"  onclick="css();"/>


Solution :

The left, and top CSS style settings aren't working because you must first set the position property. If the position property is not set, setting the left and top styles will have no affect. The position property has these settings:

  • static
  • absolute
  • fixed
  • relative
  • initial
  • inherit

So, try setting the position property before setting left and top:

object.style.position="absolute"

The differences between the position properties affect how subsequent settings position your elements.


    CSS Howto..

    Animate Chartist on show

    How to work with Action Link when using CSS

    How to apply a transition effect to some text when hovering over an icon?

    How to mix 100% height with a minimum height

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    howto create the iPhone Contacts header scroll Effect for html?

    How to do HTML/CSS form helpers/popover

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How do I make an element scale down to nothing using a CSS transition on the iPhone?

    How to Make an OS X Style Search in XHTML/CSS

    how to center an item when it's the only one in a multi-column layout

    CSS: how to add white space before element's content?

    CSS - how to avoid class= for every single paragraph?

    CSS HTML How to align image within div to bottom right

    How to apply an opacity without affecting a child element with html/css?

    css how to prevent content from drifting underneath fixed position areas?

    How to add custom css/js to just one page in WordPress?

    How is table cell height calculated?

    Some doubts about how make an image clickable using CSS

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    Show-hide based on two sets of selectors--how to make them work together?

    How to make a div expand to right side of page and bottom of page [closed]

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How to Flip Div's in Randomly

    How to pass css :active pseudo class to javascript?

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    Why is last select option always shown, even when styled out

    How to make images inside a box responsive CSS

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    HTML/CSS: How to create a box for the footer?