代码之家 › 专栏 › 技术社区 › James Stone

出现在父级后面的HTML子级

materialize parent-child css html

James Stone · 技术社区 · 6 年前

我决不擅长编写HTML或CSS,但由于没有自己的选择,我不得不设计一个网站。网站的实际功能可能会受到限制,只要它看起来可以正常工作。

我已经被允许使用Materialize实现效果和格式(以及它擅长的任何其他功能)。这可能就是问题所在。我选择使用 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>

阴影框 应该出现在其父对象的顶部 转盘项目1 正当事实并非如此。加载页面时(在Microsoft Edge上) 阴影框 显示在其父元素的后面(您必须删除F12菜单中的图片元素才能看到它)。

2 回复 | 直到 6 年前

Claudiu D. 6 年前

试试这个

.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>

fencepencil 6 年前

看起来您在错误的位置使用了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)或代码笔链接吗?需要知道你想做什么。阴影框。