Question

我想堆叠一些div元素，如下图所示，而不必手动输入我添加的每个新div的位置。有没有什么方法可以写一个样式，我会像这样堆叠我的元素？我想避免使用javascript。

做类似的事情：

div{
  left:-30px;
}

不起作用，因为它会将所有这些都移动相同的数量。

我所知道的我可能做的就是将较小的div与彼此相邻的间隙一样大，让它们包含更大的div。这个问题是我希望能够通过操纵大元素的z-index来改变堆栈顺序，如果它们是不同div的子元素，它们将无法工作。

enter image description here 这是一个堆栈代码段：

div {
  position: relative;
  float: left;
  width: 200px;
  height: 300px;
}
#div_1 {
  background-color: red;
}
#div_2 {
  background-color: blue;
}
#div_3 {
  background-color: yellow;
}
#div_4 {
  background-color: green;
}

<body>
  <div id="div_1">div1</div>
  <div id="div_2">div2</div>
  <div id="div_3">div3</div>
  <div id="div_4">div4</div>
</body>

Answer 1

这是你要的吗？

＆＃13;

div {
  position: relative;
  float: left;
  width: 200px;
  height: 300px;
  margin-right: -50px;
  z-index: 0;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.8);
}
div:hover {
  z-index: 100
}
#div_1 {
  background-color: red;
}
#div_2 {
  background-color: blue;
}
#div_3 {
  background-color: yellow;
}
#div_4 {
  background-color: green;
}

＆＃13;

<body>
  <div id="div_1">div1</div>
  <div id="div_2">div2</div>
  <div id="div_3">div3</div>
  <div id="div_4">div4</div>
</body>

＆＃13;

Answer 2

使用dispaly:inline:block float:left;

enter image description here

＆＃13;

body {
  background: #d300ff;
  margin: 0;
  padding: 0;
}
.strip {
  width: 100px;
  height: 700px;
  display: inline-block;
  margin: 0;
  padding: 0;
  float: left;
}
.strip1 {
  background: #fe0000;
}
.strip2 {
  background: #ffa901;
}
.strip3 {
  background: #41ff01;
}
.strip4 {
  background: #01b7ff;
}
.strip5 {
  background: #011eff;
}

＆＃13;

<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
<div class="strip strip4"></div>
<div class="strip strip5"></div>

＆＃13;

堆叠div元素

2 个答案: