Bootstrap 3: Stacking Order in Navbar with Custom Image Styling - html

Question

I have been trying to port the functionality of a simple rounded image class to work with Bootstrap v3.3.7. Essentially, I nest an img inside of a div, and apply an inset border with alpha-transparency. It works great, as seen in this simple jsFiddle:
Rounded Avatar jsFiddle
CSS:
.inset {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 1px rgba(0,0,0,0.1);
}
.inset img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
position: relative;
z-index: -1;
}
And the markup would look like:
<div class="inset">
<img src="http://rs775.pbsrc.com/albums/yy35/PhoenyxStar/link-1.jpg~c200">
</div>
However, when I attempt to use this inside of a navbar in Bootstrap v3.3.7, I am encountering what I presume to be a stacking issue that I just cannot resolve. As in the sample above, I had started out with the img having a z-index of -1, so that it would sit below the div. This puts it underneath the navbar. So, I had assumed that I could simply push up the z-index of the div and the img to a physical value, trying 998 for the img and 999 for the div.
When I do that, however, the div does not show. If I am to push the img below the div, however, I see the div and the border being correct - I just can't get it to display above the image. I've create a minimal example of this behavior as a Bootply.
Bootply with Avatar Rounding and Missing Inset Border
I am at a loss to explain this, (and my front-end skills leave a bit to be desired). Can only assume that there is something simple that I have to be missing. Any help would be greatly appreciated.
Thank you, in advance.

Answer 1

By giving it a z-index:-1, you're sending your image below the current stacking context. Because it doesn't have one, and because it doesn't have any parent with a background, it renders as you expect it to, but you shouldn't expect it to. And without giving it a z-index:-1, you can't make it render below its parent. But, again, it's not just below the parent, it's below the stacking context.
Here's what happens when I simply put your example inside: a div with background.
The problem is you want an effect applied to the parent to render above the child.
You could (and should) use either a sibling/child of the child, which could be either an unused pseudo-element of the parent or a pseudo-element of the child. But, since the child is an <img /> tag, it cannot have pseudo-elements, so we'll stick to the parent:
.inset {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
}
.inset::after {
width: inherit;
height: inherit;
border-radius: inherit;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
content: '';
}
.inset img {
border-radius: inherit;
width: inherit;
height: inherit;
display: block;
}
<div style="background-color: red;">
<div class="inset">
<img src="http://rs775.pbsrc.com/albums/yy35/PhoenyxStar/link-1.jpg~c200">
</div>
</div>
This will work anywhere you place it, regardless of current z-index or stacking context.
The other option, if you insist on Doing-it-wrong™ would be to wrap the current parent inside an element that would create a new stacking context
position:relative;
z-index: 0;
... but I find it harder to maintain, bloated and probably confusing for anyone not familiar with how stacking contexts work. This technique comes in handy when adding color overlays to images (instead of using an extra element, you just use the wrapper background). But, again, it confuses people so it shouldn't be used.