Stacking Object

overview

Wanting to place text over image? Want to stack image over another image? Here is a example of how to stack objects together. We will use a text object and an image object as an example to create the layout shown above.

STEP 1

Drop text object and image object into the same column

STEP 2

Check your column position setting under Properties > Arrangement > Position is set to relative

STEP 3

Select text object and change some settings:

  • Position: absolute
  • Top:50%
  • Left:50%
  • Z-index:5

result 1

The object is now place almost to the center middle of the space. The position is calculated from the top left of the text object. We will have to shift the position to the center of the text object.

STEP 4

Look for Properties > Transform setting for the text object and input "translate(-50%,-50%)" to position the text object in the center.

result 2

Now the text object is in the middle center.

Related articles

Let's chat

+603.7955.5148

let us help you

Can't find what you're looking for?

Get in touch
Name
Email
Contact No
Company Name
Company Website
Where did you learn about XTOPIA?
Thank you

We will get in touch with you soon.

Ooops!
Generic Popup2