Text under the overlay doesn't show

Question

I made a very basic hero section with a background and an overlay.

.hero
    width: 100%
    height: 100vh
    position: relative
    background-image: url('../assets/hero.png')
    background-position: center
    background-repeat: no-repeat
    background-size: cover

    &:before 
        content: ''
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: $secondary-blue
        opacity: .5
        overflow: hidden
        z-index: 1

.hero--welcome
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    align-items: left
    width: 100%
    height: 100%
    z-index: 2

<div className="hero">
  <div className="hero--welcome">
    <h6>Welcome to</h6>
    <h1>Alhandsya</h1>
  </div>
</div>

But the text at hero--welcome is showing in a really dark way under the overlay and I want it to go over it, how do I do it? I tried z-index but didn't work.

Result (screenshot)

Screenshot

Why are you placing `h6` **before** `h1`? While this is a valid HTML, it is also not a good practice — Alon Eitan, Sep 21 '18 at 18:48
`className` is not a valid attribute for your div elements. Change them to `class`. — benvc, Sep 21 '18 at 18:55
@AlonEitan Hey Alon, Can you explain to me why is or a bad practice? should I use a paragraph instead? — Ahmed Maher, Sep 21 '18 at 19:01
@Laura Just edited the question, you can find a screenshot now :) — Ahmed Maher, Sep 21 '18 at 19:02
@benvc yes as Yashu said I'm using ReactJs thats why its className — Ahmed Maher, Sep 21 '18 at 19:02
Thanks for clarifying, it will help next time if you include the tags / details in your question regarding the frameworks, etc that are involved. — benvc, Sep 21 '18 at 19:06
@benvc you're right it was totally my bad, I just didn't want to bug people with all the React nonsense because it was an HTML/CSS problem ^^ — Ahmed Maher, Sep 21 '18 at 19:07
You don't need `z-index` at all to fix that, instead just add `position: relative;` to your `.hero--welcome` rule. And the reason is when mixing elements with/without `position`, the one's without will render in a lower layer. Try to avoid using `z-index` and instead follow this given rule. — Asons, Sep 21 '18 at 21:59

score 1 · Accepted Answer · answered Sep 21 '18 at 18:54

You are only adding z-index to the &:before, and didn't add z-index to the actual parent div tag.

This solution will work:

.hero
    width: 100%
    height: 100vh
    position: relative
    background-image: url('../assets/hero.png')
    background-position: center
    background-repeat: no-repeat
    background-size: cover
    z-index: 1

    &:before 
        content: ''
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: $secondary-blue
        opacity: .5
        overflow: hidden
        z-index: -1

.hero--welcome
    display: flex
    align-items: center
    justify-content: center
    flex-direction: column
    align-items: left
    width: 100%
    height: 100%
    z-index: 3

<div className="hero">
  <div className="hero--welcome">
    <h6>Welcome to</h6>
    <h1>Alhandsya</h1>
  </div>
</div>

Text under the overlay doesn't show

Result (screenshot)

1 Answers1