堆叠div元素

我想堆叠像下面的图片一样的div元素，而不必手动输入我添加的每个新div的位置。有没有什么办法可以写出一个样式来堆叠我的元素？我想避免使用JavaScript。堆叠div元素

做这样的事情：因为它会以相同的量移动所有的人都

div{ 
    left:-30px; 
}

将无法正常工作。

我知道我可以做的是有更小的div，差不多相邻，并让它们包含更大的差距。这个tho的问题是我希望能够通过操纵大元素的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>

来源

2014-10-02 Billakosama

哪里是你的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

这是你要求的吗？

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>

来源

2014-10-02 13:26:29

哇...负余量。为什么我没有想到那个？...... GENIUS。 – Billakosama 2014-10-02 13:31:16

使用dispaly:inline:blockfloat:left;

enter image description here

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>

来源

2014-10-02 12:47:52 Suresh

你也可以使用'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

堆叠div元素

回答

相关问题