stack

stack 堆叠布局组件。在堆叠布局中，每个子组件的尺寸和位置和 stack 组件相同，并且按照先后顺序依次堆叠显示。下面的例子展示了两个在 stack 组件内重叠显示的文本元素。

堆叠布局200×100px

<stack>
  <p class="text1">Text 1</p>
  <p class="text2">Text 2</p>
</stack>

* {
  text-align: center;
}

.text1 {
  font-size: 64px;
  color: #fff;
}

.text2 {
  font-size: 48px;
  color: #f008;
}

stack {
  background-color: gray;
}

提示

stack 组件总是使用堆叠显示的布局策略，无法通过 display 等 CSS 属性更改为其他布局（如 flex 布局或流式布局）。

布局行为

stack 组件具有固定的堆叠布局策略。其尺寸由两种约束决定：

1. stack 的尺寸首先由 width 或 height 等尺寸 CSS 属性指定；
2. 父级元素的布局可能会直接决定 stack 的布局，如 flex 布局中的 align-items: stretch、flex: 1 等属性；
3. 否则 stack 组件的尺寸由子元素的最大宽度和最大高度决定。

一旦确定了 stack 的尺寸，那么它的所有子元素都会具有相同的外框尺寸（即子元素加上 border 和 margin 后的尺寸）。这有时会导致困扰，例如通过 stack 将一张图片做为背景，而上层的元素尺寸过大会导致这张图片可能铺不满。