How to position elements (Auto, Relative, Freestyle, Fixed, Sticky)
In TeleportHQ, you choose how an element is positioned in the Position section of the right panel. Auto keeps the element in the normal page flow. Freestyle lets you drag it anywhere inside its parent, for example a "SALE" badge on a photo. Fixed and Sticky keep it on screen while visitors scroll. You can then set its offsets (top, right, bottom, left) and its Z-index (which element sits on top).
Before you start
- Most layouts don't need these options. Rows, columns and grids place elements for you. Read How layout works: rows, columns and grids first if you are new to layout.
- Position settings apply to the screen size you are editing and to all smaller ones. To change positioning only on mobile, see How to change styles for mobile only.
Which option to choose
The Position dropdown in TeleportHQ has five options:
| Option | What it does | Use it for |
|---|---|---|
| Auto | The default. The element follows the page flow, placed by its parent row, column or grid. | Almost everything. |
| Relative | The element stays in the page flow. Other elements with Freestyle positioning inside it are measured from its edges. | A container that holds a Freestyle element. |
| Freestyle | The element leaves the page flow. You can drag it anywhere inside its parent. It can overlap other elements. | A badge over an image, a decorative shape. |
| Fixed | The element is pinned to the browser window. It stays in the same spot while visitors scroll. | A chat button in a corner, a header that is always visible. |
| Sticky | The element scrolls with the page until it reaches its offset (for example, the top of the window), then stays there. | A header or a sidebar menu that sticks when you scroll past it. |
Steps
- On the canvas, click the element you want to position. For example, click a "SALE" badge.
- In the right panel, open the Visual tab.
In the Position section (after Size), click the dropdown in the section's title row. It shows Auto by default.
- Choose Relative, Freestyle, Fixed or Sticky.
- For Freestyle, Fixed or Sticky, use the row of six alignment buttons to push the element to the left, center, right, top, middle or bottom. Each side button sets that side to
0px; the center and middle buttons center the element between both sides. - To place the element more precisely, type values in the four boxes for top, right, bottom and left. For example, type
16pxin the top box. - In Z-index, type a number to control which element appears on top when elements overlap. For example, type
10. A higher number sits in front.
Move a Freestyle element by dragging
After you choose Freestyle in TeleportHQ, you can move the element on the canvas like in a design tool.
- On the canvas, select the Freestyle element. Dashed lines connect it to the edges of its parent.
- Drag the element to a new spot. The dashed lines show the distance in pixels.
- To move in a straight line only (horizontal or vertical), hold Shift while you drag.
- To leave the original in place and drop a copy, hold Alt (Option on Mac) when you release the mouse.
While you drag one element, its edges and its center snap to the edges and center of its parent and of the elements next to it. A guide line shows what it lines up with. To move it without snapping, hold Ctrl (Cmd on Mac) while you drag. Snapping is off when you drag several elements at once.
The editor saves the new position in pixels, even if you typed a percentage before. Dragging also works for Fixed elements.
Check that it worked
- The element's new position shows on the canvas right away.
- Fixed and Sticky elements don't stay on screen while you scroll the editor canvas, because the canvas shows the whole page at full height. Open Preview in the bottom toolbar and scroll there to check them. See How to preview your site before publishing.
Troubleshooting
The element's margins disappeared after I changed its position When you switch from Auto to Relative, Freestyle, Fixed or Sticky, TeleportHQ sets the element's margins aside. They are stored, not deleted. Switch back to Auto and the margins come back.
A "Position Relative was set to the parent container." message appeared A Freestyle element is measured from the nearest parent that has a position. If its parent had none, TeleportHQ set the parent to Relative for you. This is expected. Hover the info (i) button in the Position title row to see which element it is measured from ("Relative to …").
I can't see the top, right, bottom and left boxes These boxes only appear for Freestyle, Fixed and Sticky. Relative and Auto don't show them.
My Freestyle element moves the whole layout when I drag it Dragging only moves freely when every selected element is set to Freestyle (or Fixed) at the screen size you are editing. Otherwise the drag moves the element into another container. Check the Position dropdown, and check that you are on the right screen size.
My element is hidden behind another element Give it a higher Z-index than the element in front. For example, if the other element has 5, type 10.
Good to know
- Choosing Auto removes the element's offsets (top, right, bottom, left), unless its position comes from a larger screen size or a CSS class.
- When the position comes from a CSS class or a larger screen size, the dropdown shows it in grey, by its CSS name:
absoluteis Freestyle andstaticis Auto. Relative, Fixed and Sticky keep their names (relative,fixed,sticky). - When the element sits inside a row or column, Position also shows Align Self (how this one element aligns, different from its siblings) and Parent Order (its order among its siblings). These are hidden for Freestyle and Fixed.
- When the element sits inside a grid, Position shows Justify Self, Align Self, Row and Column. See How to create a grid layout.
- Images and videos also get Object Pos, which picks which part of the picture stays visible when it's cropped, for example
center top. - You can group several Freestyle elements with Ctrl+G (Cmd+G on Mac).