You can place your step on the page in the following ways:

  • Relative to screen: step is anchored to a fixed position on the screen, regardless of scrolling
  • Relative to element: step is anchored to a specific element on the page

Both of these options are available from the Location & Position panel, under the Anchor option.

Relative to screen

When selecting the Relative to screen anchoring, the step will be anchored to the screen. You can still control where in the screen you want the step component to be positioned; you have the following options:

  • Top-left
  • Top-right
  • Top-center
  • Bottom-left
  • Bottom-right
  • Bottom-center
  • Center

For additional control over where your step is placed, you can adjust the offset by modifying the X and Y axis for the step placement -- you can use pixel values (px) or percentages (%). Know the difference and what to choose.

Note: Steps that are anchored relative to the screen will automatically adjust to the browser and are responsive to changing sizes.


Relative to element

This option lets you anchor your step to an element that's present on the page.

Once you select this option, you will be prompted to select the element to which you want your step to be anchored to. You can use our point-and-click element selector to pinpoint your desired element; Chameleon then uses CSS Selectors to identify this particular element. 

👉 Understand how to handle element selection in Chameleon

Once you've selected an element to attach your step to, you can also select the position of the step relative to the element:

In the Auto case, the step will automatically be placed between the element and the center of the page. This will enable the step to automatically adjust itself in case the element changes its position in the page.

In this case, you cannot further manually adjust the position of the step. However if you select one of the other options -- Left, Above, Right, or Below -- you will be able to further adjust the positioning offset by using px or % values. 

Note: In some cases, you might find that the placement isn't possible, so Chameleon will auto-adjust and show the step on the bottom right corner. In the example below, it was selected 'Left of element' but there is no room for the step, so it's been auto-adjusted.

Troubleshooting element selection

Sometimes your step may not show because the element is not found on this page. This may be due to the way the element is being identified.

Chameleon uses CSS Selectors to match the element and collects these from the page when the element is clicked.

👉 Have any questions or issues? Find the best way to get help.


Discover more

Did this answer your question?