diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html new file mode 100644 index 0000000000..40712df82e --- /dev/null +++ b/files/zh-cn/mozilla/tech/xul/tutorial/stack_positioning/index.html @@ -0,0 +1,30 @@ +--- +title: 定位层(stack堆) +slug: Mozilla/Tech/XUL/Tutorial/Stack_Positioning +translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning +--- +<p>这一节描述如何为堆中的元素进行定位</p> +<h3 id="堆子元素的位置">堆子元素的位置</h3> +<p>通常，stack的子元素为与堆的大小匹配会自动扩展。然而，你也可以将其子元素放在指定的位置。例如，如果一个堆有两个按钮子元素，一个房子左边缘20像素，距顶部50像素。第二个可以房子距离左边缘100像素而距离顶部5像素。</p> +<p>可以通过设置两个属性来指定子元素的位置，水平方向上使用left属性，竖直方向上使用top属性。如果你在stack的子元素中不指定这些属性，就会扩展以匹配堆的尺寸。</p> +<p>例子1：</p> +<p><img alt="" style=""></p> +<table> + <tbody> + <tr> + <td style="width: 568px;"> + <p><stack></p> + <p> <button label="Goblins" left="5" top="5"/></p> + <p> <button label="Trolls" left="60" top="20"/></p> + <p> <button label="Vampires" left="10" top="60"/></p> + <p></stack></p> + </td> + </tr> + </tbody> +</table> +<p>这个堆有三个子元素，每个元素都使用了left和top属性来定位。这里所有的子元素都是按钮，但是并不是所有的子元素必须是同一类型。可以是任意元素，包括格子或者其他堆。</p> +<p>堆的大小由所有紫云山的位置来决定，总会将大小调整到所有子元素都可见的大小。如果你将left属性设置为400，堆将会有一个400加上元素宽度的宽度。你也可以通过各种样式的不同属性如width。Max-width等来重写这个尺寸。</p> +<p>也可以通过脚本来调整left和top的值，这样就会使元素移动。堆的优点是当一个指定位置元素位置发生变化时，其他元素不会受到影响。如果在格子中移动子元素，其他元素可能会动态的改它们的位置。</p> +<p>你也可以将元素重叠起来。当绘制子元素的时候，元素会按照它们出现在堆中的顺序出现。就是说，第一个子元素在最后面。最后一个元素出现在顶部。你可以使用DOM函数来改变子元素的顺序。</p> +<p>在响应鼠标事件的时候，顶部的元素会最先获取这个事件。也就是说如果有两个按钮重叠起来了，最上面的那个按钮会捕获到鼠标点击的事件。</p> +<p>下一节描述标签格子（tabboxes），与面板相似但有自己的外观</p> |