堆叠div元素
我想堆叠像下面的图片一样的div元素,而不必手动输入我添加的每个新div的位置。有没有什么办法可以写出一个样式来堆叠我的元素?我想避免使用JavaScript。堆叠div元素
做这样的事情:因为它会以相同的量移动所有的人都
div{
left:-30px;
}
将无法正常工作。
我知道我可以做的是有更小的div,差不多相邻,并让它们包含更大的差距。这个tho的问题是我希望能够通过操纵大元素的z-index来改变堆栈顺序,如果它们是不同div的子元素,那么它将无法正常工作。
下面是一个堆栈段:
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>
这是你要求的吗?
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;
}
<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>
哇...负余量。为什么我没有想到那个?...... GENIUS。 – Billakosama 2014-10-02 13:31:16
使用dispaly:inline:block
float:left;
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;
}
<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>
你也可以使用'display:table-cell;'而不是'dispaly:inline:block'' float:left;' – 2014-10-02 12:51:50
我不明白这是不同于只有100x700的div彼此 – Billakosama 2014-10-02 13:01:42
高度和宽度是仅用于示例! – Suresh 2014-10-02 13:40:40
哪里是你的HTML/CSS? – 2014-10-02 12:40:17
你如何处理颜色?如果您已经手动完成这项工作,那么添加偏移量可能不会有太多工作。如果你使用像LESS或SASS这样的预处理器,它会变得更加容易。 – 2014-10-02 12:50:46
我添加了一些代码。颜色只是为了这个例子,所以你可以看到我的目标是什么。这些div实际上都是相同的颜色。嗯neevr听到更少和sass ..虐待它看看它 – Billakosama 2014-10-02 12:54:10