Skip to content
Advertisement

How to override position : absolute in css?

I have a menu on top of my page, and after that a div tag that uses a class as below:

<div class="a">
   Hello!
</div>

a is a general class that has position: absolute; in style.
I want to disable this absolute; since the div content not shown completely. So I decided to use another class that overrides the position setting.

<div class="a overridden-a">

What should I set for position: in .overridden-a{ position: ???? !important } in my other style?

Update: I don’t want to edit the a class styles, It is common and general in project.

Advertisement

Answer

The default value of position is static.

The use of !important is not best practice and should be avoided where possible. Instead, to override a CSS rule you need to use a selector of a higher specificity. Try this:

.a.overridden-a { 
    position: static;
}

position: relative; would achieve what you require as well.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement