出现在父

Question

我不擅长编码HTML或CSS，但由于没有自己的选择，我被迫设计了一个网站。只要网站看起来有效，网站的实际功能就会受到限制。

我被允许使用Materialise来实现效果和格式化（以及其他任何擅长的功能）。这可能是问题产生的地方。我选择使用Materialise中的carousel来显示页面上的项目以“显示我的能力”等等。这个问题存在的事实可能与此相矛盾。

这个的实现比我预期的要好，但是，我希望在旋转木马上将文字放在所述图像上。每个图像都有不同的文字。我希望文本在一个黑暗的半透明框内，以创建阴影效果并使文本可读。我有以下代码：

.background {
height: calc(100% - 64px);
width: 100%;
background-color: #fdfdfd;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.carousel-wrapper {
position: relative;
top: 5%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 70vw;
}
.shadow-box {
position: absolute;
width: 55vw;
height: 55vh;
background-color: rgba(50, 50, 50, 0.5);
z-index: 500 !important;
}
<div class="background">
    <div class="carousel-wrapper">
        <div class="carousel carousel-slider center" style="z-index: 250 !important;" data-indicators="true">
            <div class="carousel-item" href="#one!"><img src="Tree_ropes.jpg">
                <div class="shadow-box">
                    <h2 style="font-weight: bold">Tree Ropes</h2>
                </div>
            </div>

问题是， shadow-box 应该出现在它的父 carousel-item one 之上，对吗？不是这种情况。当我加载页面时（在Microsoft Edge上） shadow-box 出现在它的父对象后面（你必须删除F12菜单中的图片元素才能看到它）。

Answer 1

看起来你在错误的地方使用div。

试试这个：

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="Tree_ropes.jpg"></a>
<div class="shadow-box">
    <h2 style="font-weight: bold">Tree Ropes</h2>
</div>
</div>

你可以发布其余代码（CSS）或codepen链接吗？需要知道你要用.shadow-box做什么。

Answer 2

尝试使用此

.background {
height: calc(100% - 64px);
width: 100%;
background-color: #fdfdfd;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;

}
.carousel-wrapper {
position: relative;
top: 5%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 70vw;
}
.shadow-box {
position: absolute;
width: 55vw;
height: 55vh;
background-color: rgba(50, 50, 50, 0.5);
z-index: 500 !important;
}
.carousel-item {
  position: relative;
}
.carousel-item .shadow-box {
  position:absolute;
  width:100%;
  top:0px;
  bottom:0px;
  z-index:1;
}

<div class="background">
    <div class="carousel-wrapper">
        <div class="carousel carousel-slider center" style="z-index: 250 !important;" data-indicators="true">
            <div class="carousel-item" href="#one!">
              <img src="https://thehealthyhive.com/wp-content/uploads/2011/11/linden-tree.jpg">
              <div class="shadow-box">
                <h2 style="font-weight: bold">Tree Ropes</h2>
              </div>
            </div>
      </div>
  </div>
</div>