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?

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.