Placing an element on top of another...

User 2019639 Photo


Guest
18 posts

Hi,
I don't know if I'll describing it correctly but here it goes.
I want to add a image that spans 12, but on top of it I want to add some text and button (or an small image for a layered effect)
The idea being that the text and button remain fixed in place over the large image even if sized.
I know I read something about it but can't for the life of me find it.
Possibly push and pull? If anybody has a link to the tutorial I'd appropriate it.
Cheers
User 232214 Photo


COO
827 posts

There are various ways, you can set the image as a background and place content on top or you can use absolute positioning. In the example here http://rsd.coffeecup.com/tips-v09.html#tip_10_3 it is done using absolute positioning (and with a hover effect, but it can be done without hover as well).
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2019639 Photo


Guest
18 posts

Thanks for the quick response Bob, but I don't see where something was superimposed on that sample.
I do understand the items on the background, but not the second option.
Cheers
User 232214 Photo


COO
827 posts

Somehow a number dropped when I pasted the link above, I corrected it. :rolleyes:

Please use the link again and look at step 2 called 'Absolute Powers'. This should explain how an absolute positioned elements is taken out of the document flow and can be placed anywhere, with the z-index making sure it sits on top of other elements if desired.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2019639 Photo


Guest
18 posts

Ok I think I'm understanding how it works.
Running with the example you linked to...
If I wanted to keep the button in the same place as per your the example shown, would I have built the image and text within a container? The container would be relative so everything in the container would move with it as sized, including the absolute button within the container.
something like that?
Cheers
User 232214 Photo


COO
827 posts

Lasa Art wrote:

If I wanted to keep the button in the same place as per your the example shown, would I have built the image and text within a container?

You only need a container for the overlay effect on hover. If you don't need that you can place everything (image + text + button) in a column (or container). The absolute positioned element(s) can be positioned anywhere in the parent (make sure to set the position property of the column or container to relative).

Not entirely sure without actually playing with an example but I feel that in this case it might be best to position the image absolute. Now the button and text (and any other elements you might add) will 'ignore' the image and can be placed anywhere (using the normal margin / padding controls). If the images is the 1st element the others will automatically be placed on top, if not you can use the z-index to move the image down.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2019639 Photo


Guest
18 posts

Thanks Bob!
I'll definitely play with it, just needed a nudge in the right direction.
Cheers

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.