：在父元素后面的元素之前

Question

我尝试使用:before来实现以下效果，但我对z-index有疑问。

我的代码是这样的：

＆＃13;

＆＃13;

.container {
  background : #FFF;
}

.item {
  background-position : 50% 50%;
  background-repeat : no-repeat;
  background-size: cover;
  width : 200px;
  height :200px;
  position : relative;
}

.item:before {
  content  : '';
  position : absolute;
  width    : 100%;
  height   : 100%;
  right    : -20px;
  bottom   : -20px;
  border   : 2px solid #0AF;
  z-index  : -1;
}

＆＃13;

<div class="container">
  <div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在的问题是容器似乎覆盖了:before元素。

目前我不介意＆＃34; MIDDLE AGE＆＃34;项目

我如何克服这个问题？

Answer 1

添加以下 CSS样式：

.container {
  position: relative;
  z-index: 1;
}

JSfiddle中的代码：https://jsfiddle.net/5cq5576k/

Answer 2

试试这个：

.container {
  background : #FFF;
  position: relative;
  float: left;
}

.item {
  background-position : 50% 50%;
  background-repeat : no-repeat;
  background-size: cover;
  width : 200px;
  height :200px;
  position : relative;
}

.item-border {
  content  : '';
  position : absolute;
  width    : 100%;
  height   : 100%;
  right    : -20px;
  bottom   : -20px;
  border   : 2px solid #0AF;
  z-index  : -1;
}

<div class="container">
  <div class="item-border"></div>
  <div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=200%C3%97200&amp;w=200&amp;h=200')"></div>
</div>