html - 我可以使用纯 CSS 堆叠重叠的元素吗？

是否可以在容器中放置未知数量的元素，以便在容器不够大时看起来像堆叠在一起？我正在尝试仅使用 HTML 和 CSS 来执行此操作。

如果 parent 比 child 大，这是它的样子。

这是当有更多 child 占据 parent 时我试图完成的事情(填充颜色以显示堆叠顺序):

有些东西我看了但没有运气(也许我错过了什么或者不是那么好):

CSS 计数器 - 仅适用于内容属性
将子级 div 相互嵌套(如 Inception)
CSS flexbox - 它只会包裹或收缩

下面是我正在尝试做的事情:http://codepen.io/vickyleong/pen/VaPBYg . 尝试调整窗口大小。

注意: children 是正方形，但是有重叠堆叠，像级联

我正在使用 Sass，但这是我的代码，仅包含 HTML 和 CSS:

body, * {
  box-sizing: border-box;
  margin: 0;
}

.card {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #FAFAFA;
  border: 1px solid #F4F4F4;
  box-shadow: 0px 1px 3px 1px #DDD;
}

.card-content {
  margin: 1rem;
}

.student-pic-sm {
  width: 100px;
  height: 100px;
}

.round-pic {
  background-color: #AAA;
  border-radius: 50%;
}

.batch-list-item .card-title h2 {
  margin: 1rem 0;
}
.batch-list-item .card-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.batch-list-item .student-pic-list {
  height: 100px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .round-pic {
  box-sizing: border-box;
  display: inline-block;
  border: 3px solid #333;
  overflow: visible;
}
.batch-list-item .round-pic .round-pic {
  margin-left: 25%;
  margin-top: -3px;
}
.batch-list-item .round-pic:nth-child(2n) {
  background-color: #BBB;
}
.batch-list-item .round-pic:nth-child(3n) {
  background-color: #CCC;
}
.batch-list-item .space-filler {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .students-count {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8rem;
      -ms-flex: 0 0 8rem;
          flex: 0 0 8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.batch-list-item .students-count p {
  font-size: 16pt;
}

.student-pic-list {
  position: relative;
}
.student-pic-list > div + div {
  position: absolute;
  left: 4%;
}
.student-pic-list > div + div + div {
  left: 8%;
}
.student-pic-list > div + div + div + div {
  left: 12%;
}
.student-pic-list > div + div + div + div + div {
  left: 16%;
}
.student-pic-list > div + div + div + div + div + div {
  left: 20%;
}
.student-pic-list > div + div + div + div + div + div + div {
  left: 24%;
}
.student-pic-list > div + div + div + div + div + div + div + div {
  left: 28%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div {
  left: 32%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div {
  left: 36%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div {
  left: 40%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div {
  left: 44%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 48%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 52%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 56%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 60%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 64%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 68%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 72%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 76%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 80%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 84%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 88%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 92%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 0%;
  z-index: -1;
}

<div id="batch-1" class="batch-list-item card">
  <div class="card-title">
    <h2>Pending Batch</h2>
  </div>
  <div class="card-content">
    <div class="student-pic-list">
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
    </div>
    <div class="students-count">
      <p>14 students</p>
    </div>
  </div>
</div>

最佳答案

除第一个类型外的负边距:

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    background: lavender;
}

#container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px solid hotpink;
}

.inner {
    height: 100px;
    width: 100px;
    margin-left: -50px;   
    -webkit-transition: margin-left 0.3s ease; /* Safari */
    transition:  margin-left 0.3s ease;
    border: 2px dashed black;
    box-sizing: border-box;
    background-color: rgba(255, 0, 255, 0.2);
}

.inner:first-of-type, #container:hover .inner:first-of-type {
    margin-left: 0; 
}

#container:hover .inner {
    margin-left: -30px;  
}

img {
    width: 100px;
    height: 100px;
}

<div id=container>
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div>  
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
</div>

关于html - 我可以使用纯 CSS 堆叠重叠的元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36076798/

html - 我可以使用纯 CSS 堆叠重叠的元素吗？

上一篇：javascript - 文本框的多个最小值和最大值

下一篇：javascript - HTML 元素在 JavaScript 中表示为全局变量，如何？