How to push elements after absolute element


Tags: html,css,css-position

Problem :

I am trying to display all of an element's children after itself. I have a <div> wrapped in a <section> that has position: absolute and its top, right, bottom, and left are all 0. After that <div>, I have another <div> wrapped in a <section>. That div just has a <h3> with a <p> under it.

This is the HTML code:

<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#">Link</a>
    </div>
  </section>
  <section>
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>

...and this is the CSS:

main {
  clear: both;
}
main section:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}
main section:nth-child(1) div.container {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
  text-align: center;
  width: 100%;
  margin: auto;
}

How can I display the page like this, without defining a margin after the .fullscreen?



Solution :

From your code it appears that you want the section elements to take up the full screen height.

You don't need positioning to do that. Viewport units now have excellent support and you can just allocate the height to be 100vh.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main {
  clear: both;
  /* not required there are no floats */
}
main section {
  height: 100vh;
  border-bottom: 2px solid red;
}
main section div.container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#section2">Link</a>
    </div>
  </section>
  <section id="section2">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>


    CSS Howto..

    How do I get a video to fit in a specified area?

    How to change the css color code permanent using php

    how to css absolute positioning right way

    How to “float” an absolutely positioned element div out of its container

    How to debug IE print problem

    How do I get this CSS text-decoration override to work?

    How to select first a element of li with CSS?

    How can I align text to the top and the bottom of the same div css?

    How to Set all children start with same line of main parent

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How would I re-position my 2nd bg image “ url(repeat_bg_right_side.png) ” to the right side of page using css?

    Messed up slides in custom minimal JS/CSS slideshow

    How to use “currentColor” CSS 3 keyword in LESS?

    How to link some text next to copyright in CSS

    how to reverse CSS animation on second click with jQuery

    How can I add interactive content to a Bootstrap popover?

    How to notify view from model to change a value in backbone

    How to resize DIV to less than its initial width & height?

    Third-Level Menu Items Are Always Showing

    How to create a custom shape - css

    How to dynamically generate an entire class and concatenate it to its parent selector using LESS

    how can I overcome existing css and change button style to the default windows style button?

    Button transition using javascript and css, how to temporarily disable the transition

    How to hide ads with media queries?

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to create a css class for category tags?

    How to use css to set svg hover color?

    How to test for css properties like modernizr.js

    How do I add a border to an (8 point star) css shape?

    How to create directional two pointed arrow using css?