I’m not sure if this has been asked (and answered) elsewhere but I notice that the title tag and right/left arrows in a carousel placed in a section rather than a row will display over the top of a fixed navbar regardless of how the z-indexes of either are set.
Anyone else seen this or know why this is? Visit my website: faithcentre.info (not my logo, btw) and watch how the carousel titles in each slide scrolls on top of my navbar.
Is this a bootstrap ‘Hmmmm’ or is it behaving as designed?? Not a critical issue but certainly is a curious one.
Hi @randyrie,
I want to start off with a thank you. You always form your questions well and provide enough info to make an attempt to solve it!
First, the longer explanation - skip past for the short answer:
So, I’m not sure how much you know about z-index. It can actually get a bit complicated. First, there is the general stacking order of the browser. Without any CSS positioning, things lower in the the DOM tree are stacked on top of things higher in the DOM tree (basically - but not always). But, as soon as you add any position (something other than ‘static’) that element and any descendants will be displayed in front of any non-positioned elements - even without a z-index change.
Groups of elements with a common parent will move together through the DOM in what is called a stacking context. So for example, if you have a tree with two div elements next to each other. Everything inside the second div will have a higher stacking context than anything in the first div. If both divs have a position set and a z-index set, then nothing in the first div can layer on top of an item in the second div, no matter the z-index! There are some other CSS properties besides position that can also change the stacking order and thus make changing the stack using z-index tricky. Basically, you have to consider everything that has come previously on the page and is outside of the normal stacking order and whether a parent element is controlling the stacking context.
The short (not really) answer:
If you look at your page, the header has a position of fixed. In order to put it on top of the content it also has a z-index of 1. Without any other elements on the page having a different stacking context, this would be fine and place it over all of the other content.
Next, if you look at the slide controls, they have a z-index of 1. Since they have the same parent for stacking order (the main HTML tag) that means that the DOM order takes over and items later in the DOM will be stacked on items earlier in the DOM. So, your controls are over the navigation.
The slide caption is a little tougher. It doesn’t have a z-index, but it is positioned absolute. This takes it outside of the normal stacking context. Since the parent element isn’t positioned it uses the HTML tag again. Without a z-index, it is layered later than items earlier in the DOM that are positioned - like the nav.
Finally - to the answer - just increase the z-index of your header containing the nav to a higher number. Since they all have the same stacking context, they will compete against each other. Right now they all essentially have an equal z-index, so the order in the tree matters.
Cheers,
Bob
Thank you very much for your quick response, @RobM.
I tried increasing the z-index of the navbar to a 3, a 4, and even a 9999, but this didn’t work so I decreased the z-index of both the carousel title, the next control and the carousel itself to “0” (I tried a ‘-1’ but that didn’t work) and that seems to have done the trick.
I still think this has something to do with using a ‘section’ rather than a ‘row’ div in bootstrap4 since I never had this issue before using the row div. ??
Hi
That is odd - when I jumped on your site I was able to get the slide elements behinf the nav by increaing the z-index on the header.
Anyway, Bootstrap could very well be adding base CSS that changes the stacking order between sections and rows, resulting in the difference. You would have to look through the Bootstrap stylesheets.
Just a thought… I raised the index of only the navbar rather than its container header when I tried to fix this - you raised the header. Perhaps this made a difference and why it worked for you? Maybe it’s the header that holds the index quotient and not its child, the navbar?
Soooo many questions… I feel like a three year old
This winter when I’m all caught up with things and am bored, I’m going to rebuild the site using rows instead of sections and see if my bootstrap theory holds. And try the various combos of z-indexes to learn which holds water.
Anyway, thanks again @RobM for your helping me out with your insights and skill. I always learn a lot from your responses.
Hi @randyrie,
Yeah, the header parent has the z-index you need to change. Since it is positioned fixed it determines the stacking order of the child elements, in this case, the navbar.
Cheers,
Bob
