Groupbox

Another positional model that can be used is that of the <groupbox> which stacks child elements in a column and draws a bow around them.   The syntax for this is equally simple, and although one has been provided, an example is not strictly necessary:

Without a stylesheet to make it look nice, this example is pretty bland, but it demonstrates the use of the groupbox element.

Stack & Deck

Other layout methods include the stack and deck elements, both similar but with a subtle difference; both elements place interface elements in a physical stack, placing them on top of each other, but while the stack elements offers transparency, so elements at the bottom of the stack can still be visible, the deck does not, and elements will be seen to cover entirely or overlap depending on their placement.

The code above will draw a window with the stack at the top and the deck below.  The stack elements are all displayed at once, hence the incomprehensible garble.  Notice how we have specified two decks, but only one deck is displayed, and this is the bottom one.  When the selectedIndex attribute is not defined, the default value is zero.  Indices, as we all know, tend to be zero based, so the above deck has a max index of 1.  In order to display the top deck, simply add a selectedIndex="1" attribute to the opening deck tag.  Now the top deck will be displayed.  Clearly, the use of a script to modify the selectedIndex value could produce effects similar to basic animation.