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.

通常、スタックの子要素は、スタックのサイズに合うように伸ばされます。 でも、指定の座標に子要素を置くこともできます。例えば、スタックの子に 2 つのボタンがある場合、その一つを、左端から 20 ピクセル、上端から 50 ピクセルの位置に置き、2 番目のボタンを、左端から 100 ピクセル、上端から 5 ピクセルの位置に置くことができます。

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.

子要素の位置は、要素に 2 つの属性を置くことによって指定されます。 水平方向の位置には left 属性を使い、 垂直方向の位置には top 属性を使います。 stack の子にこれらの属性を 指定しない場合、子はスタックのサイズに合うように伸ばされます。

Example 4.2.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.

この stack には、3 つの要素があります。 各々は、lefttop 属性によって与えられた座標に位置しています。ここで、3 つある子はすべて ボタンです。しかし、要素が同じ型である必要はありません。ボックスや別のスタック を含むどんな要素でも構いません。

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. 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.

stack のサイズは、子要素の 位置によって決まります。これは常に、子要素すべてが見えるサイズになります。 そのため、left 属性を 400 に設定すると、スタックは 400 ピクセルに要素の幅を足した幅になります。このサイズは、 widthmax-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.

lefttop 属性の 値を調整するために、スクリプトを使うことができます。これによって、要素を 動き回らせることができます。スタックには、一つの要素の絶対位置を変えても、 他の要素の位置は影響を受けないという利点があります。通常のボックスで要素を 動かそうとしたなら、他の要素の位置が変化するかもしれません。

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.

子要素を重ね合わせるように置くこともできます。子要素を描画する場合、要素は stack 内に現われる順で表示されます。 つまり、stack の最初の 子が最も後ろに表示され、次の子がその手前に表示されるという具合です。 最後の要素が一番前に表示されます。要素の順番を動き回らせるには、DOM 関数が使えます。

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.

マウスイベントに応答するとき、一番上にある要素が最初にイベントを捉えます。 これは、2 つのボタンが重なっている場合、上にあるボタンがもう一方のボタンに 重なっている場所でのマウスクリックを捉える、ということです。


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

(進む) 次のセクションでは、タブボックスを説明します。これはデックに似ていますが、 自分自身のナビゲーションを提供しています。

Examples: 4.2.1


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html