Question

我一直试图将一个简单的圆形图像类的功能移植到Bootstrap v3.3.7中。基本上，我将一个img嵌入div中，并应用具有alpha透明度的插入边框。它很有用，就像在这个简单的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;
}

标记看起来像：

<div class="inset">
  <img src="http://rs775.pbsrc.com/albums/yy35/PhoenyxStar/link-1.jpg~c200">
</div>

但是，当我尝试在Bootstrap v3.3.7中的导航栏中使用它时，我遇到了我认为是我无法解决的堆叠问题。如上例所示，我已经开始使用z-index为-1的img，因此它将位于div之下。这将它放在导航栏下面。所以，我假设我可以简单地将div的z-index和img推高到物理值，为img尝试998，为div尝试999.

然而，当我这样做时，div没有显示。但是，如果我要将img推到div下方，我会看到div和边框是正确的 - 我只是无法将它显示在图像上方。我作为Bootply创建了这种行为的最小示例。

Bootply with Avatar Rounding and Missing Inset Border

我无法解释这一点，（我的前端技能有点不尽如人意）。只能假设我必须缺少一些简单的东西。任何帮助将不胜感激。

提前谢谢你。

Answer 1

通过给它z-index:-1，您将图像发送到当前堆叠上下文之下。因为它没有一个，并且因为它没有任何具有背景的父级，所以它按照您的预期呈现，但您不应该期望它。并且没有给它z-index:-1，你不能让它在它的父元素下面渲染。但是，它不仅仅在父元素之下，它在堆叠上下文之下。

当我将你的例子放在里面时会发生什么：a div with background。

问题是您希望应用于父级的效果在子级上方呈现。

您可以（并且应该）使用子节点的兄弟/子节点，它可以是父节点的未使用的伪元素，也可以是子节点的伪元素。但是，由于孩子是一个<img />标签，它不能有伪元素，所以我们会坚持父母：

.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>

无论当前z-index还是堆叠上下文，这都适用于您放置它的任何位置。

另一个选项，如果你坚持使用 Doing-it-wrong™，那么将当前父级包装在一个可以创建new stacking context的元素中

position:relative;
z-index: 0;

...但我发现对于不熟悉堆叠上下文如何工作的人来说，维护，臃肿并且可能会让人感到困惑。在为图像添加颜色叠加时，此技术非常方便（而不是使用额外的元素，您只需使用包装背景）。但是，它再次使人们感到困惑，因此不应该使用它。

Bootstrap 3：使用自定义图像样式在Navbar中堆叠顺序

1 个答案: