html - 重叠div时一个div不可见

Question

我想做一个幻灯片，它应该是这样的。

但我有的是这个。 preview

如您所见，问题是左侧箭头 [rig_arrow] 是不可见的，我知道它位于主 div 的下方。我想知道如何修改代码以使两个 div 都可见。 这是代码

html

  <div class="arrow" id="rig_arrow">></div>
  <div class="arrow" id="main"></div>
  <div class="arrow" id="lef_arrow"><</div>

CSS

.arrow{
    float:left;
}
#main{
    width:200px;
    height:50px;
    background-color:rgb(153,153,153);
}
#rig_arrow{

    background-color:rgb(204,204,204);
    width:20px;
    margin-right:-20px;
}
#lef_arrow{

    background-color:rgb(204,204,204);
    width:20px;
    margin-left:-20px;
}

Answer 1

问题是 div 按照它们在 DOM 中出现的顺序堆叠在一起。您可以通过将 #main 放在第一位来更改顺序，但是您需要的不仅仅是 float: left。

另一个改变图层顺序的技巧是在右箭头上使用position: relative:

#rig_arrow{
    background-color:rgb(204,204,204);
    width:20px;
    margin-right:-20px;
    position: relative;
}

示例:https://jsfiddle.net/ykLjy4L2/1/