Bootstrap grid-system is always in front - html

Question

I'm trying to design a fullscreen-menu. It works very good but when the page itself contains a bootstrap grid-system, the grid always is in the front. Using Google Chromes developer tools i found, it's due to all col-*s contain
position: relative
If I disable it in developer tools (then position is static), it's in background.
But imho I can't just edit the whole bootstrap-css.
This is my html (removed what's too much):
<div class="header">
<input type="checkbox" id="toggle" style="display:none;" />
<label class="toggle-btn toggle-btn__cross" for="toggle">
<div class="bar"></div>
</label>
<label class="info">
test
</label>
<div class="nav">
<div class="menu">
<!-- here is the menu -->
</div>
</div>
</div>
<div class="container body-content">
<div class="wrap">
<div class="row">
<!-- THIS HERE IS ALWAYS IN FRONT DUE TO POSITION:RELATIVE -->
<div class="col-xs-6">key</div>
<div class="col-xs-6">value</div>
</div>
</div>
<hr/>
<footer>
<p>footer</p>
</footer>
</div>
the header-class is the whole navigation that displays or hide the div with class menu. The div hides the complete content of class body-content (at least it should).
So
is there a cause why all col-classes are set to relative? I don't want to get any bad surprises later.
what are the possibilities (or the correct solution) to get the grid-system in background?

Answer 1

position: relative is necessary in Bootstrap for when you need to rearrange columns. This is accomplished by using col-sm-push-4 or similar classes. I do not recommend overriding it as that could make your project a maintenance nightmare in the future. It's better to use the property that was designed to override painting order: z-index. Try to be careful when using this property because it tends to get abused quite a bit.
First, you only really need two rules for your case
.header {
position: relative;
z-index: 1
}
position: relative is needed because z-index does not affect position: static elements (the default). z-index only needs to be 1. If you find yourself needing to set it to absurdly high levels (like the 1000s) you likely just need to set the z-index of .body-content, in which case, just set it to 1 on .body-content and 2 on .header.
Either way, that should be all you need.