时间戳

首页 > 解决方案 > How do you pull an item out of an overlay div?

html - How do you pull an item out of an overlay div?

问题描述

I need help. I created a div to overlay the background image. Then I nested another div with children span in it. I'd like to pull out those span selectors on the lines so they're not obscured by their overlay. I've already used z-index property on higher than overlay itself, but still all spans are hidden behind overlay. Maybe one of you can tell me what I'm doing wrong.

.breadcrumbs {
    display: flex;
    justify-content: left;
    height: 100%;
    align-items: center;
    position: relative;
}

.breadcrumbs span {
    font-size: 1.6rem;
    color: white;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1px;
    position: absolute;
    z-index: 10000;
}
.jumbotron {
    min-height: 550px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}
.overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: black;
    opacity: 0.66;
    z-index: 10;
}
<div class="jumbotron" style="background-image: url('...');">
    <div class="overlay">
        <div class="breadcrumbs">
            <span property="itemListElement" typeof="ListItem">
                <a property="item" typeof="WebPage" title="..." href="..." class="post-root post post-post">
                    <span property="name">News Page</span>
                </a>
                <meta property="position" content="2">
          </span>
        </div>
    </div>
</div>

标签： htmlcsssass

解决方案

我不认为spans是隐藏的。如果您的意思是它获得父级的不透明度而不是您必须重新排列结构..您的跨度必须在...之外...也许在放置在其顶部的元素.overlay旁边的下一个“主”容器中.overlayabsolute

推荐阅读