Relative and absolute positioning

Version: 6000.5+

This example demonstrates the difference between relative and absolute positioning. This example also demonstrates how to use C# and UXML/USS to add and style UI controls.

Example overview

The example uses the automatic layout system to add boxes to an Editor and a runtime UI. One box demonstrates a relative offset of 25 px, while another box demonstrates the absolute position of 25 px, 25 px.

The example structures the Editor UI with C# script and the runtime UI with UXML and CSS.

You can find the completed files that this example creates in this GitHub repository.

Prerequisites

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

Create the example for the Editor UI

To create the example for the Editor UI (four gray boxes for comparison, one black box with absolute positioning, one purple box with relative positioning):

Create a Unity project with any template.
In the Project window, create a folder named Editor.
In the Editor folder, create a C# file named PositioningTestWindow.cs with the following content: [!code-cs]
To test the example, from the menu, select UI Toolkit Examples > Positioning Test Window.

Create the example for the runtime UI

To create the example for the runtime UI:

Create a USS file named PositioningTest.uss with the following content:

.box {
        height: 70px;
        width: 70px;
        margin-bottom: 2px;
        background-color: gray;
    }
#relative{
    width: 70px;
    height: 70px;
    background-color: purple;
    left: 25px;
    margin-bottom: 2px;
    position:relative;
}
#absolutePositionElement{
    left: 25px;
    top: 25px;
    width: 70px;
    height: 70px;
    background-color: black;
    position: absolute;
}

Create a UXML document named PositioningTest.uxml with the following content:

<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Packages/com.unity.documentation-examples/UIToolkit/relative-and-absolute-position/PositioningTest.uss?fileID=7433441132597879392&amp;guid=5431fce9478274238800565a45373e0b&amp;type=3#PositioningTest"/>
    <ui:VisualElement class="box"/>
    <ui:VisualElement class="box"/>
    <ui:Label text="Relative&#10;Pos&#10;25, 0" name="relative" triple-click-selects-line="false" display-tooltip-when-elided="false"/>
    <ui:VisualElement class="box"/>
    <ui:VisualElement class="box"/>
    <ui:Label text="Absolute&#10;Pos&#10;25, 25" name="absolutePositionElement"/>
</ui:UXML>

Right-click in the Hierarchy window, and then select UI Toolkit > Panel Renderer.
In the Inspector window of the Panel Renderer, select Panel Renderer > Source Asset > PositioningTest.
Enter Play mode and adjust the resolution as necessary to view the result.

Additional resources

Position element with the layout engine

Set background images