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 S M
S M
892 Points

Stack of an element. CSS - Please help

Hi,

My pen;

[https://codepen.io/anon/pen/YawMRR?editors=1100#0] (stack element on top the other)

can somebody please tell me how to achieve putting an element (stack) over another element, in this case, an image. I basically want the orange quote area to appear slightly on top of the image and then centre it. I have tried to achieve this using the z index property.

If you view my pen on full screen you can see I have slightly achieved that, thou I am not sure how to centre it.

My other problem is once the viewport get’s small the orange container seem to fall way down as the window browser get’s smaller.

Hope I’m clear (something I need to learn more about how to explain what I am trying to achieve better)

I’ll really appreciate any help on what I am doing wrong.

Thanks!

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

You want to center the orange quote box in front of your header-image?

3 Answers

Jonathan Hermansen
Jonathan Hermansen
25,935 Points

You can use this instead

<div id="main-banner">
     <div id="main-img-banner">
           <!-- Change to the picture element -->
          <img src="http://work.salwame.com/main-banner.jpg" alt="banner" >
     </div>
     <div id="quote">
          <blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy text ever since the 1500s...<br>
          </blockquote>
          <footer>
          -Testimonial Name<br>
          Company Name Here
         </footer>
     </div>
</div>

So wrap your image in a new div element, and set the overflow and max-height css properties to that div instead.

#main-img-banner {
  max-height: 700px;
  overflow: hidden;
}

#main-img-banner img {
  width: 100%;
}

#quote{
    background: #f76d6d;
    width: 90%;
    max-width: 1300px;
    min-width: 200px;
    margin: 0 auto;
    height: 150px;
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 50%);
}

You can adjust the bottom (0%) and translate's second parameter (50%) to move your blockquote up or down.

Link: https://codepen.io/jhermansen/pen/zWqqQy?editors=1100

S M
S M
892 Points

@Jonathan Hermansen thank you :)

S M
S M
892 Points
S M
S M
892 Points

Jonathan Hermansen Yes

Jonathan Hermansen
Jonathan Hermansen
25,935 Points
Jonathan Hermansen
Jonathan Hermansen
25,935 Points

One way this achieve this is to move your #quote div inside the #main-banner div, and absolute center the #quote div.

<div id="main-banner">
     <!-- Change to the picture element -->
     <img src="http://work.salwame.com/main-banner.jpg" alt="banner">
     <div id="quote">
          <blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been 
          the industry's standard dummy text ever since the 1500s...<br>
          </blockquote>
          <footer>
          -Testimonial Name<br>
          Company Name Here
          </footer>
     </div>
</div>

Add top, left and transform properties to #quote in css

#quote{
    background: #f76d6d;
    max-width: 75%;
    min-width: 200px;
    margin: 0 auto;
    height: 130px;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
S M
S M
892 Points

Thank you so much for this but it is not exactly how I want it to appear. Here is what I mean from PSD design

alt text