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

我尝试使用

：before

实现以下效果，但是

z-index

有问题

我的代码如下：

.container{
背景：#FFF；
}
.项目{
背景位置：50%50%；
背景重复：无重复；
背景尺寸：封面；
宽度：200px；
高度：200px；
位置：相对位置；
}
.项目：在{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
右：-20px；
底部：-20px；
边框：2px实心#0AF；
z指数：-1；
}

---

添加以下CSS样式：

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

---

JSFIDLE中的代码：

添加以下CSS样式：

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

JSFIDLE中的代码：

尝试以下操作：

.container{
背景：#FFF；
位置：相对位置；
浮动：左；
}
.项目{
背景位置：50%50%；
背景重复：无重复；
背景尺寸：封面；
宽度：200px；
高度：200px；
位置：相对位置；
}
.项目边界{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
右：-20px；
底部：-20px；
边框：2px实心#0AF；
z指数：-1；
}

试试这个：

.container{
背景：#FFF；
位置：相对位置；
浮动：左；
}
.项目{
背景位置：50%50%；
背景重复：无重复；
背景尺寸：封面；
宽度：200px；
高度：200px；
位置：相对位置；
}
.项目边界{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
右：-20px；
底部：-20px；
边框：2px实心#0AF；
z指数：-1；
}

你能在html中使用

img

而不是

background

吗？不，我应该在样式表中使用图像作为背景。你需要那个“容器”有背景吗？如果删除它，则会产生效果，否则，可以设置

display:inline

到container div。你能在html中使用

img

而不是

background

吗？不，我应该在样式表中使用图像作为背景。你需要那个“container”有背景吗？如果删除它，则会产生效果，否则，可以设置

display:inline到容器div。