CODEWITHSUNDEEP
htmlcss
user4313162
user4313162

Reputation:

sections sit on top of each other in absolute

I have sections wrapped within divs. I want each section to be height of the of the window and to sit on the page one after the other, I have achieved this within the divs. But currently the process div sits on the articles div, I would like the process div to continue the same flow so that after the last section within the articles div we see the first section of the process div.

Here is the HTML:

    .window {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    
    .window:nth-child(1) {
      top: 0%;
    }
    
    .window:nth-child(2) {
      top: 100%;
    }
    
    .window:nth-child(3) {
      top: 200%;
    }
<div class="articles">
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>
    <div class="process">
         <section class="window">
         </section>
         <section class="window">
         </section>
         <section class="window">
         </section>
    </div>

Upvotes: 0

Views: 1951

Answers (4)

Jarom&#237;r Šetek
Jarom&#237;r Šetek

Reputation: 478

The problem is that absolutely positioned elements position them based on the position of the first parent which is position: relative. In your case nor articles neither process are relative. And even if they were, position absolute makes them ignore the document flow. Basically when you use position absolute this way for the whole layout, you would have to position each ".window" element separately (top: 500%, top: 600% etc.).

Your style makes it work this way:

  • Every .window is positioned based on body element (so from the top)
  • Articles and process are therefore on top of the document
  • Don't forget that nth-child runs from first child for .articles children and also for .process children so the first .window for each of those parents are on the top.

I think you shouldn't use position:absolute and maybe instead set the height via javascript or jquery. That way you will achieve the look you want and the elements will follow the way you would expect.

If you don't require older browser compatibility, you can use height in vh units also:

.window {
    position: relative;
    height: 100vh;
}

Upvotes: 0

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

You are using position: absolute i.e. why it is acting weird, instead of that alter your CSS as snippet below.

Here vh is vh: 1/100th viewport height or A percentage of the window's height.

Code Snippet

.window {
  width: 100%;
  height: 100vh;
  position: relative;
}

.window:nth-child(1) {
  background: red;
}

.window:nth-child(2) {
  background: green;
}

.window:nth-child(3) {
  background: blue;
}
<div class="articles">
  <section class="window">articles 1
  </section>
  <section class="window">articles 2
  </section>
</div>
<div class="process">
  <section class="window">process 1
  </section>
  <section class="window">process 2
  </section>
  <section class="window">process 3
  </section>
</div>

Upvotes: 3

Theodore K.
Theodore K.

Reputation: 5176

That's all you need. Make window relative and give 100vh to all sections

.window {
  width: 100%;
  position: relative;
}
section{
  height:100vh;
}
<div class="articles">
  <section class="window">1  </section>
  <section class="window">2  </section>
</div>
<div class="process">
  <section class="window">3  </section>
  <section class="window">4  </section>
  <section class="window">5  </section>
</div>

Upvotes: 0

KevDev
KevDev

Reputation: 150

The only solution i can think of is to order them with a Z-Index each and define the order yourself.

Upvotes: 0

Related Questions