Skip to main content

General Settings- Position

It allows you to adjust the position of any component in all the four directions with respect to its parent component.

DrapCode Builder Additional Tools

Positioning a components using the top, bottom, left, and right properties will not work unless the position property is set first. They also work differently depending on the position value.

It has four major following settings:

  • Static: A component with static position is not positioned in any special way. It can only be positioned as per the normal flow of the page which means it won't be affected by changing the top, bottom, left and right properties.

  • Relative: A component with relative position is positioned relative to its normal position. It can be adjusted from its normal position by changing its top, bottom, left and right properties. Other content will not be adjusted to fit into any gap left by the component.

  • Absolute: A component with absolute position is positioned relative to the nearest positioned parent component (instead of positioned relative to the viewport, like fixed). However, if an absolute positioned component has no positioned parent component, it uses the document body, and moves along with page scrolling.

  • Fixed: A component with fixed position is positioned relative to the viewport, which means it always stays in the same place, even if the page is scrolled. The top, bottom, left and right properties are used to position the component. A fixed component does not leave a gap in the page where it would normally have been located.


Adjusting the Position of a Component

As you click on the component whose position you want to change, the Style Manager of that component opens automatically in the Right Toolbar. You only have to go to the General settings and change the position of the component as per you layout design.

DrapCode Builder Text Box