Stack Positioning

This section will describe how to position items in a stack.

Placement of Stack Children

Normally, the child elements of a stack stretch to fit the size of the stack. However, you may also place the children at specific coordinates. For example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge. The second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge.

The position of a child element may be specified by placing two attributes on the element. For the horizontal position, use the left attribute and for the vertical position, use the top attribute. If you don't put these attributes on a child of a stack, the child will stretch to fit the size of the stack.

Example 1 : Source View

<stack>
  <button label="Goblins" left="5" top="5"/>
  <button label="Trolls" left="60" top="20"/>
  <button label="Vampires" left="10" top="60"/>
</stack>

The stack here contains three elements, each positioned at the coordinates given by the left and top attributes. Here, all three children are buttons, but the elements do not have to be same type. They may be any element, including boxes and other stacks.

The size of a stack is determined by the positions of the child elements. It is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). So if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. You can override this size with the various style properties such as width and max-width.

You can use a script to adjust the value of the left and top attributes and thus make the elements move around. Stacks have the advantage that when one absolutely positioned element changes its position, the position of the other elements is not affected. If you tried to move elements in a regular box, other elements might shuffle their positions around.

It is also possible to place the child elements so that they overlap. When drawing the child elements, the elements are shown in the order that they appear in the stack. That is, the first child of the stack appears at the back, the next child appears next and so on. The last element appears on top. You can use the DOM functions to move the order of the elements around.

When responding to mouse events, the elements on top will capture the events first. That means that if two buttons overlap, the top button will capture a mouse click where it covers the other one.

Width and Height

The bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack.

Note that bottom and right attributes, unlike rect, are relative to the bottom and right of the stack.

When using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set.

In this example, the resulting width of the top-most hbox will be 400px:

<stack width="600">
  <hbox flex="1">
    <!-- content -->
  </hbox>
  <hbox left="0" right="200" >
    <!-- Some content here. -->
  </hbox>
</stack>

The next section describes tabboxes which are like decks but provide their own navigation.