Question

我在一个有限尺寸的容器中有许多固定尺寸的物品。如果有太多子项，我希望它们开始重叠（右上方最重），而不是溢出或包装。

这可以通过仅设置容器和子元素的样式来完成，而不需要JavaScript或特殊元素吗？

<div class="items">
  <div>A</div>
  <div>B</div>
</div>

期望的效果是这样，但没有额外的包装divs并且必须提前知道基本项目宽度（.items > div上的宽度）。

＆＃13;

.items {
  background: #FFB600;
  display: flex;
  flex-direction: row;
  left: 5px;
  bottom: 5px;
  width: 90px;
  padding: 8px;
  margin: 10px;
}
.items > div {
  flex: 0 1 20px;/*16px icon + 4px spacing*/
  height: 16px;
  position: relative;
}
.items > div > div {
  position: absolute;
  width: 16px; 
  height: 16px;
  opacity: 0.9;
}
/*Give each a different colour / apperance*/
.items > div:nth-child(1) > div {
  background: #0026FF;
}
.items > div:nth-child(2) > div {
  background: #0094FF;
}
.items > div:nth-child(3) > div {
  background: #004A7F;
}
.items > div:nth-child(4) > div {
  background: #00137F;
}
.items > div:nth-child(5) > div {
  background: #7F92FF;
}
.items > div:nth-child(6) > div {
  background: #7FC9FF;
}
.items > div:nth-child(7) > div {
  background: #007F7F;
}
.items > div:nth-child(8) > div {
  background: #00FFFF;
}

＆＃13;

<div class="items">
  <div>
    <div></div>
  </div>
</div>
<div class="items"><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
 <div class="items"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
 <div class="items"><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 class="items"><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>

＆＃13;

Answer 1

您可以使用z-index，因此最右侧的元素具有最大且最左侧的最低z-index。它不是动态解决方案，但可能会有所帮助。

重叠儿童而不是溢出

1 个答案: