Remove position:absolute attribute by adding css

Question

I have a html element with id="#item" I have a UI event that programaticaly alters the css for "#item" by adding the class ".new" to "#item". Initially I want "#item" to have "position:absolute". However once the class ".new" is added to "#item" the only way I can get the formatting I want in Chrome inspector is to removed position:absolute from the css for "#item". I'd like to accomplish this instead via the css in ".new", however in Chrome inspector my options for changing the position attribute are

static
absolute
relative
initial 
inherit
fixed

As far as I can tell none of these do the same thing as removing "position:absolute" in Chrome inspector. Can anyone suggest what to put in the css for ".new" to revert to the css default positioning.

Solution 1

The CSS2 specification says that the initial position value of an element is static.

So in your case if you can't actually remove a declaration then reset it to the "default" which is static.

#item {
    position: static;
}

Solution 2

You cannot use 'none' as an option. For my need,

.search-bar{
    position: static;
}

did the job.