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 apply custom css to split post into multiple page

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

    How to apply different css style for IE 10 and 11 only?

    How to get this div into the right position

    How to simplify cross-browsing css animation keyframe?

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to vertically align text to the middle of a list

    How should I divide up CSS files to support multiple devices?

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    How to apply CSS on Unordered List written by JSP tag on web Page

    How to disable fixed header on Mobile with CSS

    How to display the bottom of an image?

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    Superfish: How to keep sub menu open after it has been clicked

    AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

    How to structure selectors in css when using specificity?

    How can i make the horizontal navigation menu center aligned

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    How can i make div shape like this with css? [duplicate]

    how to change the css in td on mouse click using javascript

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    Newbie: How to have a row background in my case?

    How to bring in the right margin of a paragraph with border

    How do I take code from Codepen, and use it locally?

    How to remove a css class using jquery in a certain screen size

    How do i use a simple string variable with jquery?

    How to design a CSS for a centered floating confirm dialog?

    How do I add CSS to part of another object?

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How to swap class / id using jquery in a css list?

    to only three lines?
    How to implement block style for list
    How to center webpage content
    How to fix text with limited height and absolute position overflows
    How to apply a CSS property to an element using it's CSS path in Javascript?
    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html
    How to CSS border spacing (or) padding background image separately?
    CSS - How to upscale Unicode arrows?
    How to do HTML/CSS form helpers/popover
    How to make a unique line thinner using NVD3
    How to fix css tabs which disappear when header title is too long
    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?
    How to make specific line cut-off points without using
    breaks because it fails responsive design
    CSS: How to center element that is bigger then the container?
    How to remove Left property when position: absolute?
    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?
    How to set the maximum height of CSS tables?
    How to create a CSS box link without using display: block
    How to fill larger image into smaller div?
    How to refine CSS media types and properties?
    How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?
    How do you change the theme and colors of Site.Master in ASP.NET / C#?
    How to load CSS using jquery
    how to turn off the break word in css? [duplicate]