Question

目前，我正在http://rccsite.wpengine.com/rcc-remediate/上工作。该页面有一个滑块，其中包含文字＆＃34;建筑物横跨奥克兰＆＃34;和＆＃34;阅读更多＆＃34;按钮。

我花了一个多小时已经试图找出为什么嵌套的div有一个类＆＃34;幻灯片文本＆＃34;没有把文字和链接带到前面。目前图像为＆＃34; graphic-square＆＃34;在z-index为1的前面，它需要在图像的顶部，而不是在滑块的文本上。

我试图添加：

.slide-text {
z-index: 200;
position: absolute;
top: 30px;
right: 100px;
max-width: 190px;
}

已经使200上的z-index无法获得所需的输出。

但是，我成功地在前面创建了div标签，右边标有＆＃34;构建更好＆＃34;。

有没有实现这个目标？

为什么在应用z-index时页面工作正常？但幻灯片文字？我想，我在这里遗漏了一些东西。

非常感谢任何帮助。

Answer 1

问题仅仅在于以下代码：

<img src="http://rccsite.wpengine.com/wp-content/themes/genesis-child-jed/images/graphics-square.png" class="graphics-square">


.graphics-square {
  display: block; /* Make it display: none; */
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  z-index: 1;  /* Make it z-index: 0; */
}

只需隐藏.graphics-square类就可以了，或者你可以设置它的z-index：0;

在您的最后尝试并告诉我们。

Answer 2

我已经弄明白了！我必须将图形方形图像分成两部分。删除了图像的中间部分，允许文本在前面。它起作用了。

感谢Matt的想法。

Z-index并未将文本带到前面

2 个答案: