相对布局

另外一个使用相对布局的方式是对节点使用origin和offset属性来指定相对另外一个节点的位置。

  1. [ Left ] -> [ Right ] { origin: Left; offset: 2,1; }
  1. +------+
  2. | Left |
  3. +------+
  4.   |
  5.   |              +-------+
  6.   +------------> | Right |
  7.                  +-------+

offset属性不允许指定为0, 0；另外，要注意的是不要把一个节点放到另外一个节点内部去了，尤其当节点占据多个单元格的时候。

节点的偏移是从一个节点的左/右或者上/下来计算的，因此对于一个占据三个单元格的节点来说，设置offset为2会把下一个节点放置在它右边偏移两个位置的地方（而不是放在这个节点内部的第一个单元格之后）:

  1. [ A ] { size: 3,2; }
  3. [ A ] -> [ B ] { origin: A; offset: 2,0; }
  4. [ A ] -> [ C ] { origin: A; offset: 1,1; }
  1. +---+     +---+
  2. |   | --> | B |
  3. | A |     +---+
  4. |   |
  5. |   |--+
  6. +---+  v
  7.      +---+
  8.      | C |
  9.      +---+

可以为每一个节点设置origin属性；唯一不允许的是不能创建循环引用, 下面的例子是错误的：

  1. [ A ] { origin: B; offset: 1,1; }
  2. [ B ] { origin: A; offset: 1,1; }       # invalid!
  4. [ C ] { origin: E; offset: 1,1; }
  5. [ D ] { origin: C; offset: 1,1; }
  6. [ E ] { origin: C; offset: 1,1; }       # invalid!

下面是一个使用链式offset 的例子：

  1. [ A ] { origin: B; offset: 2,1; }
  3. -> [ B ] { origin: C; offset: 1,1; }
  4. -> [ C ] { origin: D; offset: 1,1; }
  5. -> [ D ]
  6. -> [ E ]
  1. +---+     +---+
  2. | D | --> | E |
  3. +---+     +---+
  4.   ^  +---+
  5.   +--| C |
  6.      +---+
  7.        ^  +---+
  8.        +--| B |
  9.           +---+
  10.             ^       +---+
  11.             +------ | A |
  12.                     +---+