Question

我试图了解如何操纵图层的排序，有人可以在下面解释为什么背景图像仍然在文本上方吗？

有人可以链接到能够正确教我图层和z-index的资源吗？

非常感谢提前！

CSS：

.trianglebackground {
    background-image:url('http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg');
    height:200px;
    width:200px;
    position:absolute;
    z-index:1;
}
.testtext{
    position:inline;
    z-index:1000;
}
.testbig{
    position:relative;
}

HTML：

<div class="col testbig" style="margin:auto;">
    <div class="trianglebackground"></div>
    <div class="col testtext" style="height:501px;">
        <div>some text here </div>
    </div>
</div>

Answer 1

因为position设置为inline

所以让它绝对或相对

.testtext{
    position:absolute;
    z-index:1000;
}

有关z-index

的更多信息，请查看此博客

http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 2

要直接回答你的问题，谷歌搜索z-index会带来很多东西。

至于为什么您的具体示例不起作用，position:inline无效。这应该是位置: relative。

Answer 3

z-index需要考虑的两件事是它依赖于内容（因为它取决于父级z-index）并且它仅适用于定位元素，不会对静态或内联产生影响元素。

这是您的用例的正确CSS。

.trianglebackground {
  background-image:url('http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg');
  height:200px;
  width:200px;
  position:absolute;
  z-index:1;
}
.col.d11 {
  z-index:2; 
  position:relative;
}

使用背景图像操纵背景图像

3 个答案: