Overlaying a button on an image

User 508542 Photo


Registered User
17 posts

I'm experimenting with RLMP, and not getting past the first hurdle. I see from tutorials that one element can be made to overlap another, so I have a full-width image in a container in row 1, and I want to overlay a button on the image. I can't see any Properties to do that. Any guidance appreciated.
User 2484360 Photo


Registered User
3,293 posts

For this you would need to place the button in the container with the image, below or above it (whichever is closer to where you wish the button to be on top of the image) and use the negative top or bottom margins to place the button where you would like it.
User 508542 Photo


Registered User
17 posts

Thanks, Adam. Initially that seems to work. I have a 16:1 image with no max width, in a container spanning all 12 columns of the grid. I want a button near the right-hand end of the image: I drag a button into the container, below the image, size the button to 'Auto' and it sits at the left end, and with a top margin of -114 px it's about halfway up the image. Then I float the button right, and it jumps to a position exactly ABOVE the top of the image, at the right hand end.

From then on, no matter what I do, the position of the button is irrecoverable. For example, if I reset the top margin to 0, the button sits, correctly, below the image, but when I then set a negative top margin, the button disappears behind the image! Float left, and the button moves to the left end, still behind the image; float 'none' and the button comes in front of the image.

Whilst experimenting, I discover that I can achieve what I want by setting the button's float to 'none', and RIGHT margin to +93% (counter-intuitively). Not quite there yet, as this doesn't look good on reducing the screen width. Maybe there's a better way?
User 2484360 Photo


Registered User
3,293 posts

Graham Walker wrote:
Whilst experimenting, I discover that I can achieve what I want by setting the button's float to 'none', and RIGHT margin to +93% (counter-intuitively). Not quite there yet, as this doesn't look good on reducing the screen width. Maybe there's a better way?


You would need to add a little code after export. You would simply need to apply a z-index to the button, so that it sits on top of the image. Do not forget to apply a position along with the z-index.
User 508542 Photo


Registered User
17 posts

Yes, I can see that would work. In the end I decided to put the image in afterwards in a custom.css as a background to the column class (it's a graduated colour, and that allowed me to play with the height displayed).

Thanks for the guidance.

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.