Z-Index或图层顺序

Question

我正在研究This site

除了狗之外，大部分都很好。 “宠物友好产品”正如你所看到的那样，他坐在图形下面，栅栏上。所以颜色重叠已经过去了。理想情况下，我需要让狗坐在那层之上。

关于如何实现这一目标的任何建议？

提前致谢。

Answer 1

将以下属性添加到狗：

position: relative;

只有定位元素遵守z-index规则（如果没有定义z-index，则图层顺序由页面中元素的实际顺序定义。）

Answer 2

更改图片中课程的css 到

.petfriendly{
    float: right;
    left: 834px;
    margin-right: 20px;
    margin-top: -130px;
    position: absolute;
}

通过定位图像，它将位于顶部。

Answer 3

您需要将position设置为与static（默认值）不同，才能使z-index正常工作。

试试这个：

.petfriendly {
  float: right;
  margin-right: 20px;
  margin-top: -130px;
  position: relative; // added
}