Z-index with button & image not working

Support
#1

#helppost
Check out the page : http://sabaithaispasaloon.com/org/home-loans/
there is the button in the middle . I have use image to make it over the image but the image showing under the bottom . unfortunitlly the z index is not working any where . please help and suggest .

#2

Hello @KaziTouhid,

Thanks for posting in!

Are you trying to have a button with the phone image as something like this?

  • Please remove the image element.
  • In your button element, find the Graphic Setup and enable it.
  • You should be able to find the filed where you can upload the phone image.
  • And lastly, find the “Customize” tab and insert this inline element css:
$el.x-anchor span.x-graphic {
    order: 2;
}

We would love to know if this has worked for you. Thank you.

#3

this is the design I need to do .

#4

I just need to know how can I use z-index in Button and images ???

#5

Hey @KaziTouhid,

I checked your button and looks like you already figured it out.

Do you still have an issue regarding the button?

Thanks.

#6

I did manage to get the design on desktop but the solution is not good for mobile or anything. As I took two row , I had the button on top row and image on bottom then z-index the whole row with “-” margin but its not a slotution . Please help me out thanks

#7

Hey @KaziTouhid,

I see. There’s currently no option to achieve that design so here’s a temporary workaround.

Add you image as a Graphic of the button then set the Graphic Top and Right Margins to a negative value then add this code in the Button’s Element CSS.

$el,
$el .x-anchor-content {
  overflow:visible;
}

That should achieve something like the screenshot below. I believe you can achieve what you need given this knowledge.

I’ll post this case as a feature request and maybe our developers will take this into account for future button setups.

Hope that helps.

#10

UPDATE: In addition, here’s a non-coding method:

  1. Use the new Row. Here’s an introduction in case you’re not aware: https://www.youtube.com/watch?v=6pN_a4eD5NM
  2. Setup 2 Columns inside the Row. Make sure to set 2 columns for all screen sizes.
  3. Enable Flex for the Columns and set the Flexbox > Align Vertical to Center

  4. Set the image’s left or right margin to a negative value.

After all that, you should be getting something like the screenshot below. It will be consistent in all screen sizes if you made sure to set 2 columns for all screen sizes.

Hope that helps.

#11

thats sad , every element should support z-index ??? :frowning:

please forward that .

btw I just used the button design as a full image :stuck_out_tongue:

#12

Thanks for your feedback, @KaziTouhid. I’ve forwarded this case.

Yes, you can use a full image instead of using text and graphic. Turn off the Button element’s Text Setup and just set up the Graphic Image.

Hope that helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.