div going under previous div instead of after

Question

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 :

I want the red div under the image. Like vertically under. You need to scroll to see it. — G. Hamaide, Apr 28 '16 at 11:10

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

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

edited May 23 '17 at 12:07

Community

1
1

answered Apr 28 '16 at 09:24

Vincent G

8,547
1
18
36

But how to have it under it ? As in two divs following each other ? – G. Hamaide Apr 28 '16 at 09:26

div going under previous div instead of after

1 Answers1