Sonny Sonny - 4 months ago 19
CSS Question

Bootstrap Column - Position Relative and Z Index

I have an element that has a fixed position to the bottom left corner of the browser window. I noticed that the text in footer layers above the fixed position element.

I traced this back to the Bootstrap style for columns that sets them to a relative position. If I remove or override that style, the layering appears as I desire. I don't, however, know why that style is there. I am concerned over unintended side-effects.

Why does Bootstrap use

position: relative
in their column class?

I'm also open to other ways of accomplishing my desired layering without changing core Bootstrap styles.




EDIT

When creating a minimal example, I found that the issue was not present. I then looked to my own CSS for the problem. I found that it was
z-index: 0
on the element containing the fixed position element that was the culprit. Changing it to
z-index: 1
fixed the problem.

Answer

Add a class to the element that you want to change then overwrite the Bootstrap styles with the new class.

It is difficult to guess without a code example, but something like:

<footer><p class="override-bootstrap">Some text</p></footer>

CSS

.override-bootstrap {
  // here reset the styles
}

Make sure that the stylesheet for your new class is included after the bootstrap css.