我可以使用纯CSS重叠重叠的元素吗？
梁咏琪
是否可以在容器中放置未知数量的元素，以便在该容器不够大时看起来像是堆叠的？我正在尝试仅使用HTML和CSS来做到这一点。
如果父母比孩子大，这就是它的样子。
这是当有更多孩子占据父母的情况下要完成的工作（填充颜色以显示堆叠顺序）：
我看过的一些东西却没有运气（也许我错过了一些东西，或者只是没有那么好）：
- CSS计数器-仅适用于content属性
- 将孩子
div彼此嵌套（例如“盗梦空间”） - 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" 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
我可以使用CSS将一幅图像的一半准确重叠吗？
- 2
我可以在CSS中将div元素与剪切路径重叠而不遮盖子div吗？
- 3
我可以让内容重叠滚动条吗？的CSS
- 4
我可以让内容重叠滚动条吗？的CSS
- 5
我可以使用Glide来使CircleImage具有与Facebook Messenger中类似的重叠图标吗？
- 6
如果我使用位置绝对元素重叠
- 7
我可以使用CSS根据子元素数量应用样式吗？
- 8
我可以使用WebDriver获取元素的CSS属性“填充”吗？
- 9
我可以使用CSS过渡为绝对定位的元素设置动画吗？
- 10
我可以使用CSS反转两个元素的显示顺序吗？
- 11
我可以使用WebDriver获得元素的CSS属性“填充”吗？
- 12
我可以使用Jquery获得元素的HTML源吗？
- 13
可以使用CSS交换div元素的位置吗？
- 14
我可以使用纯虚拟功能覆盖虚拟功能吗？
- 15
我可以使用纯MySQL解决此问题吗？（以';'分隔的列中的值联接）
- 16
我可以使用在CUDA内核中实现纯虚拟功能的类吗？
- 17
CSS ::之后元素文本重叠
- 18
HTML CSS 元素相互重叠
- 19
显示图片重叠css元素
- 20
我可以使用CSS转换获得此形状吗？
- 21
我可以使用特定参数定位CSS样式吗？
- 22
我可以使用JS等待多个CSS动画吗？
- 23
我可以使用类覆盖CSS #ID吗？
- 24
我可以使用jQuery或JavaScript更改此CSS吗？
- 25
可以对非重叠内存使用安全的可变别名吗？
- 26
CSS页脚重叠我的内容
- 27
Bootstrap与我的CSS重叠
- 28
我可以使用CSS伪元素将一些文本括在方括号中吗？
- 29
即使整个img通过z-index与另一个元素重叠，也可以使整个img可点击吗？
我来说两句