Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Abe Layee
Abe Layee
8,378 Points

Position Absolute element not stacking in order

Hello all. How are we all doing today? I am trying to understand why my h1 element is not above the h2 element. The h2 element is on top of the h1. I position it with absolute. Also, I try giving the h1 and h2 a z-index but still my h1 wasn't above the h2 element. What is casuing my element to act like this?

     <div id="header_section">
         <section>
             <h1>Abraham Swaray</h1>
              <h2>Web Developer</h2>
         </section>
     </div>

Here is my css

 #header_section {
         background:#222;
         background:url('../img/mountain.jpg') no-repeat center center fixed;
         height:90vh;
         background-size:cover;
         text-align:center;
         color:#fff;
         font-family:'Josefin Sans',Arial,sans-serif;
         text-transform:capitalize;
         position: relative;
         top:0;
     }

    #header_section  h1,h2 {
         position: absolute;
          top:50%;
          right:50%;
          font-size:2em;
          -webkit-transform: translate(50%,50%);
             -moz-transform: translate(50%,50%);
              -ms-transform: translate(50%,50%);
               -o-transform: translate(50%,50%);
                  transform: translate(50%,50%);
    }

3 Answers

Chris Rault
Chris Rault
2,160 Points

Hey Abraham,

Check out this codepen for a revised example: http://codepen.io/anon/pen/EjJVVw

I'm not sure why you'd want them overlapped like that, but it should work now. You'll also notice I simplified the markup, using the html5 header tag with a class instead of ID. ID's should be reserved for JavaScript usage, as they are a lot heavier than classes.

Hope that helps ;)

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you very much. I added some padding on the h2 element and that was useful to space things up.

Chris Rault
Chris Rault
2,160 Points
Chris Rault
Chris Rault
2,160 Points

No probs Abraham :) Glad I was able to help!