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

概述是否可以在容器中放置未知数量的元素,以便在容器不够大时看起来堆叠？我只想用 HTML和CSS来做这件事. 如果父母比孩子大,这就是它的样子. 当有更多的孩子占据父母时(填充颜色显示堆叠顺序),这就是我想要完成的事情： 有些事情我看了但没有运气(也许我错过了什么或者不是那么好)： > CSS计数器 – 仅适用于内容属性 >将子div嵌套在彼此之内(如Inception) > CSS flexbox 是否可以在容器中放置未知数量的元素,以便在容器不够大时看起来堆叠？我只想用 HTML和CSS来做这件事.

如果父母比孩子大,这就是它的样子.

当有更多的孩子占据父母时(填充颜色显示堆叠顺序),这就是我想要完成的事情：

有些事情我看了但没有运气(也许我错过了什么或者不是那么好)：

> CSS计数器 – 仅适用于内容属性
>将子div嵌套在彼此之内(如Inception)
> CSS flexBox – 它只包装或缩小

这是我想要做的事：http://codepen.io/vickyleong/pen/VaPBYg.
尝试调整窗口大小.

注意：孩子是正方形,但堆叠重叠,如级联

我正在使用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" >  <div >    <h2>Pending Batch</h2>  </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>      <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 >      </div>      <div >      </div>      <div >      </div>      <div >      </div>      <div >      </div>      <div >      </div>    </div>    <div >      <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,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堆叠重叠的元素吗？全部内容，希望文章能够帮你解决html – 我可以使用纯CSS堆叠重叠的元素吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。