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 to transform a button into this styled button

    How to add a custom font to Rails app?

    How to make css-menu independent of the number of menu items?

    How to add code area css style to HTML

    How to prevent input elements from affecting a table's columns' widths?

    How to keep block elements inline and also correctly centered?

    How to hide a class on specific page using css

    How to add css class to style.css?

    How can I apply a custom material design theme to a Bootstrap component

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How to apply icons to links using css?

    How to display table-cell on a single line (IE6-IE7)?

    How can I use a non-breaking space before an inline-block-default element, such as a

    How to overlay a div over a canvas CSS

    How to adopt drop down menu for mobile devices? [closed]

    How come the first

    How to make a HTML element fill a dynamically sized container using CSS

    (css) how to display a div up as compared to the other divs

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    Extend page content in height or show white background under content

    How to center text horizontally and vertically within box element? [duplicate]

    how to make html table first row 'absolute'

    how to put links in one line [CSS]

    How to adapt website to user's Screen Resolution?

    How does style elements such as “color” in CSS apply to elements like img?

    How to force parent div to expand by child div width/padding/margin/box?

    How can I workaround this CSS anomaly?

    How can I float divs so that they expand past their container?

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How to make horizontal lines with words in the middle using CSS?