Stack of an element. CSS - Please help

1

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!

2

Yeah it’s the absolute positioning on #quote that’s giving you trouble. My suggestion would be changing that to relative (see the new styling below) and then you can move that quote element up with a good old negative top margin.

#quote {
    background: #f76d6d;
    max-width: 75%;
    min-width: 200px;
    margin: -50px auto 0 auto;
    height: 130px;
    position: relative;
    z-index: 2;
}

I believe that also fixes your mobile display issue. The problem there was also the absolute positioning combined with the 540px top position.

I did notice that on smaller displays “Company Name Here” pops out of the containing div…for that I’d remove the height: 130px; style and let the div grow in height naturally as the screen shrinks down.

EDIT: Should mention you could technically keep that absolute positioning on the quote element, but you have to add position: relative to an element that contains it. Basically what absolute positioning does on an element is to take it out of the flow of the page. It unstacks it. I don’t know if you ever played Jenga, but think of it as pulling a block from the tower and then placing it on the table instead of back on top of the tower. It’s now hanging around on its own in the window.

Now if we wrap that whole tower in relative positioning, that absolute block remains with the tower and you can move it anywhere within it. Which is handy when you want to position something at the very bottom of a container div. For example a button or a link.

That was a terrible explanation I know :laughing:

Check out this: https://css-tricks.com/almanac/properties/p/position/ it might explain the different types of positioning (including absolute inside relative) way better than I can. Also, CSS Tricks is an awesome site for styling tips and methods. I’ve used it many a time for reference on how to do certain things.

3

@dlyons your explanation is fine :smile:. I have “sort of” for now manage to get it to appear how I want it from your explanation and the link provided. Now I just need to make the nav more mobile friendly.

Thank you for your help!