Superposing Elements with Stack

In a stack container the elements are displayed one on the other and not side by side as with the box tag.
The simplest application is to make text with effect of shading or engraving, but there are more uses one as one will see it in the examples.

The stack tag

stack

Container whose contents are superimposed. The size by default is that of the biggest element contained.

style

The style attribute is especially useful for this tag and especially to lay out the contained elements. The size of the container can be thus defined by the width and height descriptors of CSS.

Example of shading

A shading effect, or engraving, is created by superimposing two texts, shifted and of different colors.

<description value="Submit" style="color:white; margin-left:1px; margin-top:1px" />
<description value="Submit" style="color:gray" />

The main part is made by the style attribute and CSS descriptors color for the color, margin-left for the shift on the margin-top for the vertical shift.
The texts are included in a stack container, which one places for example in a button to give it a shading label.

Example of progressmeter

If you read the tutoriel in the recommended order, the chapters of first level at first, you know the progressmeter object, and perhaps you deplored that the numerical value and the bar are placed side by side and not one inside the other as one sees it in real applications.

We take again the same example, but this time we place in the hbox container which align the progressmeter and the text horizontally a stack which will superimpose the content.
The text is placed on the left by default and so you have to use the style attribute again, to put it in the center.

<stack>
    <progressmeter id="MyPM" width="400" value="0" />	
    <description id="desc" value="0%" style="width:400px; text-align:center; font-weight:bold; margin-top:1px" />
</stack>

The following CSS descriptors were used:
- width: one gives to the text the same width as the progressmeter, 400px.
- text-align: center value to center it.
- make-weight: bold, so that the number is better seen.
- margin-top: a pixel to center vertically.

• Demo code.zip.