html - 堆放 div 的盒子？

Question

我正在尝试堆叠盒子。如果我垂直开始，我知道该怎么做，比如从顶部开始然后向下。我的问题是，我该怎么做横向？
Here is how i did it vertically
Here is how i tried doing it horizontally

 .box1 {
    float:left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:100px;
 }
.box2 {
    float: left;
    width:150px;
    height:20px;
    margin-right:20px;
    border:1px solid;
}
.box3 {
    float: left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:200px;
}
 .box4 {
    clear:both;
    float: left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:200px;
}

Answer 1

我不确定我是否理解您的意思。这是一次粗略的尝试。您可以使用定位和 z-index 来实现结果。

position: absolute;
top:10px;
z-index:1;

https://jsfiddle.net/78qptee4/

顺便说一句，您可能会发现这很有用: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context