-1

My h1 and h2 texts aren't showing where they should be: over my container. They are actually hidden behind my blurred container for some reason I couldn't figure it out.

Even after placing z-index: 2 inside my .blurred-container .content h1 css my content actually still hidden and I don't know why.

<style>
.blurred-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url("https://images.unsplash.com/photo-1565361587753-6c55978411d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
background-size: cover;
background-attachment: fixed;
height: 100vh;
}

.blurred-container .content {
position: relative;
overflow: hidden;
box-shadow: 0 5px 32px rgba(0, 0, 0, 0.5);
padding: 0;
max-width: 600px;
background: inherit;
border-radius: 12px;
}

.blurred-container .content::before {
content: "";
position: absolute;
left:-20px;
right:-20px;
top:-20px;
bottom:-20px;
background: inherit;
filter: blur(20px);
}

.blurred-container .content h1 {
z-index: 2;
}

.blurred-container .content h2 {
z-index: 2;
}
</style>

<div class="blurred-container">
<div class="content">
        <h1>CONTENT</h1>
        <h2>content</h2>
</div>
</div>

I want this text inside h1 and h2 to be visible. What did I miss, guys? Thanks in advance. Here's codepen, if it helps

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
Leo
  • 15
  • 3

1 Answers1

0

z-index sets the z-order of a positioned element. For an element to be positioned, it needs a position value other than the default of static. Your headings are using static positioning therefore z-index doesn't apply.

In your particular case, you'll want to change the positioning to relative.

.blurred-container .content h1,
.blurred-container .content h2 {
    position: relative;
    z-index: 2;
}
Nathan Dawson
  • 18,138
  • 3
  • 52
  • 58
  • Oh, didn't know I had to set a positioned element in order to use z-index properly. I shouldn't be that much lazy and actually read more about the property before using it.. Thank you Nathan, it was very helpful! – Leo Aug 10 '19 at 02:34