如何将中心元素显示在彼此之上

Question

是否有办法将元素的子元素水平和垂直居中，但是将它们全部显示在彼此之上，就好像它们有position: absolute一样。但是没有为每个孩子独立设定风格。

<div style="widht: 100: height: 100">
  <div style="widht: 80: height: 80">
  <div style="widht: 60: height: 60">
  <div style="widht: 40: height: 40">
  <div style="widht: 20: height: 20">
</div>  

结果应该是这样的：

Answer 1

如果您无法嵌套div，可以使用position:absolute;和top / left值来定位每个div：

<强> DEMO

HTML：

<div class="wrap" style="width: 100px; height: 100px;">
    <div class="one" style="width: 80px; height: 80px;"></div>
    <div class="two" style="width: 60px; height: 60px;"></div>
    <div class="three" style="width: 40px; height: 40px;"></div>
    <div class="four" style="width: 20px; height: 20px;"></div>
</div>

CSS：

div {
    position:absolute;
    background:#38E1BA;
    border:5px solid #000;
}
.one{
    top:5px;
    left:5px;
}
.two{
    top:15px;
    left:15px;
}
.three{
    top:25px;
    left:25px;
}
.four{
    top:35px;
    left:35px;
}

Answer 2

据我所知，以当前的html格式执行此操作的唯一方法是绝对或相对定位...

如果您可以更改格式，则可以在同一元素上使用多个背景图片或嵌套元素 ..