CODEWITHSUNDEEP
htmlcssflexbox
G. Hamaide
G. Hamaide

Reputation: 7106

div going under previous div instead of after

I've facing an issue which I'm sure has an easy solution yet I can't find it.

I've got two divs. The first one has a background image blurred and content inside. It works perfectly fine. But the second div instead of going after the first one goes under it.

Here is my code : 

<div class="section1">
  <!-- Content here -->
</div>
<div class="section2">
  <!-- Content here -->
</div>

And my CSS:

.section1 {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  height: 100%;
  margin-top: 100px;
}
.section1:before {
  content: "";
  background: url('/images/background.jpg') center center;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  filter: blur(5px);
}

.section2 {
  padding: 50px 0;
  display: flex;
  flex-direction: row;
  flex: 1;
  background-color: #FF5D63;
}

I've added a margin-top in section1 for the sake of the demonstration. The result is shown in the image below :

enter image description here

Upvotes: 0

Views: 370

Answers (1)

Nutshell
Nutshell

Reputation: 8537

Because the .section1 has fixed position and the .section2 has static position by default, you have to specify a relative position for instance on the .section2 to make it go above the first one and take the z-index value of 2 by default.

See this fiddle

I like to share this answer on SO because it explains how z-index value is counted and it's well explained : https://stackoverflow.com/a/7490187/6028607

Upvotes: 1

Related Questions