没有绝对定位的堆栈 div

在前端开发中，经常会用到绝对定位和相对定位来设置元素的位置。但有时候，我们也需要在不使用绝对定位的情况下，让元素具有类似于堆栈一样的效果。下面，我们就来介绍一种没有绝对定位的堆栈 div。

实现思路

这个没有绝对定位的堆栈 div 的实现思路其实很简单。我们使用 CSS 的 display 属性来实现。具体思路如下：

1. 通过 display:flex 属性，将父元素设置为弹性布局。
2. 将所有子元素设置为弹性项目，并设置 flex:1 属性。
3. 使用 justify-content:center 和 align-items:center 属性，将所有子元素居中对齐。
4. 将子元素的 z-index 属性设为负数，使其在堆叠时能够呈现出满足我们需求的效果。

代码实现

下面，我们就来展示具体的代码实现过程，如下：

<div style="display:flex; justify-content:center; align-items:center;">
  <div style="flex:1; background-color:#CCC; height:200px; width:200px; z-index:-1; opacity:0.5;"></div>
  <div style="flex:1; background-color:#EEE; height:150px; width:150px; z-index:-2; opacity:0.75;"></div>
  <div style="flex:1; background-color:#FFF; height:100px; width:100px; z-index:-3; opacity:1;"></div>
</div>

其中，我们定义了一个外部的 div，将其设置为了弹性布局。并在其中嵌套了三个子元素 div，分别设置了背景颜色、高度、宽度等等。通过设置子元素的不同 z-index 值，达到了类似于堆栈的效果。

总结

以上就是没有绝对定位的堆栈 div 实现的思路和代码实现过程。虽然这种方法的效果不如绝对定位的方法直观，但是却可以解决一些特殊场景下的问题，有时也可以给我们的页面增加一些意想不到的效果。