z-index 不适用于 tumblr？图像不断重叠。

Question

因此，无论我对 z-index 进行了多少更改，我都拥有此图像位于任何内容之上的东西。我想让虚张声势的标签位于 .quoteicon 的顶部，但无论我做什么，它都不起作用。我放在里面的小引号出现了，但是它的红色背景被隐藏了。

我希望它看起来像这样（我必须在 photoshop 中这样做，只是为了解释我想要什么。）： http://i.gyazo.com/3eddbf25f79c97fb7d646d6050c1b23a.png

但它目前看起来像这样（你可以看到坐在它前面的小白语录。）： http://i.gyazo.com/0859417a1746ba934896dea46acc073d.png

CSS:

.quotewrap{
margin-bottom:30px;
}

.quoteicon{
width:60px;
margin-bottom:-58px;
padding-right:5px;
border-right:5px #F0F0F0 solid;
z-index:998;
}

.quoteicon img{
border:5px solid white;
outline:1px solid #F4F4F4;
}

.bluff{
background-color:red;
text-shadow:1px 1px black;
height:34px;
width:34px;
color:white;
font-family:arial;
line-height:34px;
text-align:center;
font-size:20px;
margin-top:-10px;
z-index:999;
}

HTML：

        <div class="quotewrap">
    <div class="quoteicon">
    <img src="https://33.media.tumblr.com/avatar_d020f5726f28_48.png">
    </div>

   <div class="bluff">❝</div>

   </div>

Answer 1

看到这个fiddle：http://fiddle.jshell.net/d3cosgc7/

你要明白相对位置和绝对位置的原理。那会对你有很大帮助。花点时间阅读 fiddle，如果您有任何问题，请告诉我。

干杯，

Answer 2

z-index 属性仅适用于位置为：相对|绝对|固定的容器；

z-index 不适用于 tumblr？图像不断重叠。

z-index isn't working on tumblr? Images keep on overlapping.

html

css

image

z-index