Relative positioning

What is Relative positioning?

Relative positioning allows items within a cimdoc to define their position attributes as a proportion of their parent container, rather than using fixed (absolute) values. This approach enables layouts to be more flexible and adaptive.

For example, an item with a width of 50% will always take up 50% of its container’s width, regardless of the container’s actual size.

Example

{
  "version": "4",
  "document": {
    "panels": [
      {
        "width": "100mm",
        "height": "100mm",
        "items": [
          {
            "id": "itemA",
            "itemType": "rectangle",
            "type": "shape",
            "position": {
              "x": "0%",
              "y": "10%",
              "width": "50%",
              "height": "50%"
            },
            "color": "rgb(0, 0, 255)"
          },
          {
            "id": "itemB",
            "itemType": "rectangle",
            "type": "shape",
            "position": {
              "x": "50%",
              "y": "10%",
              "width": "50%",
              "height": "50%"
            },
            "color": "rgb(255, 0, 0)"
          }
        ]
      }
    ]
  }
}

In this example, itemA and itemB will each take up half the width of their parent panel. itemB will be placed next to it because it has the x value of 50%.

TODO: show a rendered example