Question

请参阅this小提琴。

我想在图像顶部显示一个元素，并让背景覆盖图像，所以它看起来像这样：

 ------
|      |
|  12  |-------
|      |       |
 ------        |
   |           |
   |           |
    -----------

而不是这个：

 ------
|      |
|  12----------
|  |           |
 --|           |
   |           |
   |           |
    -----------

这个想法是一个用户图像和一些通知。我不想在通知框的背景中使用其他图像。

我原以为在标记中使用img之后发出的通知会让它显示在图像上方，但不会显示。

更改z-index没有任何影响（这是我的第一个想法），但我宁愿使用标记流来实现分层，因为z-index我发现维护性较差（所以我很高兴它不起作用。）

但我无法解决问题......什么是可行的解决方案？

Answer 1

为了让z-index工作，应用的元素必须有一个定位，在你的情况下应该是相对的，所以只需为#num添加：position: relative; z-index: 1;

这是更新的fiddle

Answer 2

https://jsfiddle.net/gpvqjv0b/2/

Z索引仅适用于定位元素

#num {
display: block;
width: 40px;
height: 30px;
font-size: 16px;
line-height: 30px;
font-weight: bold;
text-align: center;
background-color: #f00;
position:absolute;
margin-left:-20px;
margin-top: 5px;
z-index:955;

}

Answer 3

将position: relative添加到#num，这样它就会“流动”。高于其他要素。

Check the update Fiddle

Answer 4

这个怎么样？它对通知使用绝对定位，以便将它们从文档流中取出，并且不需要任何负边距。

#container {
    margin: auto;
    width: 120px;
    position:relative;
}

#img {
    margin-top: 20px;
}

#num {
    left:-20px;
    position:absolute;
    width: 40px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    background-color: #f00;
}

https://jsfiddle.net/vursdua4/

CSS - 背景始终显示在<img/>后面

4 个答案: