What is the proper way to override an element's CSS 'position: relative;' using Bootstrap 2.2.1?

Question

I am working on a project using the Twitter Bootstrap 2.2.1 Initializr boilerplate. In order to properly override Bootstrap's default CSS attributes you need to create an entry for the affected class in 'main.css' and add the desired attributes.

In this particular case Bootstrap has a class called '.collapse' that is applied to the default navbar.

.collapse{
    position:relative;
    height:0;
    overflow:hidden;
    -webkit-transition:height .35s ease;
    -moz-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease
}

The portion that is causing problems for me is the 'position: relative;'. I need there to be no position statement. Now I know that I can just open the Bootstrap CSS file and edit it but if the file gets updated that change will be lost.

What is the proper way of overriding this CSS entry?

Cornetist

just curious, what is it that position: relative is breaking? In general, this should be very similar to position: static. Are you trying to position its children relative to some other element? – Secretarial

It kind of a long story but there is an issue post login that breaks the hyperlink rollover in the navbar for the .brand class. After troubleshooting I found that eliminating the relative position attribute the rollover then worked as normal. – Cornetist

Answer 1

Include your own CSS file after bootstrap.css and write a rule with the same selector. As for the position property, you could use position: static; or whatever you'll need.

Dinsmore

Is static the equivalent of having no position statement at all? – Cornetist

Your css properties always have values, and static is the default value, the elements render in order, as they appear in the document flow – Grassplot

Thanks. 'position: static;' worked. I thought I needed to eliminate the position statement when I really needed to set it to it's default. Thank you very much! – Cornetist

Answer 2

If is just one property you can add inline css to the html element and reset the position property to his default value:

<nav class="collapse" style="position:static">
  <ul>
    <li>....</li>
    <li>....</li>
  </ul>
</nav>

But if you think you will change/add others styles, then you should add your own CSS file after bootstrap.css, with that all your styles will override the bootstrap default css.

Grassplot

This is a really nice solution for someone who is pulling their hair out. Thank you, sir. – Manipur