是否有可能使用CSS这样重叠无序列表堆栈？

Question

我需要以重叠的方式显示矩形，如下所示：

我下面的代码无法达到此效果。 谁能帮忙吗？

 .location-stack ul{ list-style-type: none; margin: 0px; } .location-stack li{ margin-top: 5px; margin-left: 50px; border: 2px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.4); background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 500px; } 

  <div class="location-stack"> <ul> <li>Fav 1</li> <li>Fav 2</li> <li>Fav 3</li> </ul> </div> 

Answer 1

默认情况下，以DOM顺序出现在后面的元素显示在先前元素的前面。 如果需要相反的操作，可以使用z-index 。

 .location-stack ul { list-style-type: none; margin: 0px; } .location-stack li { position: relative; margin-top: -5px; border: 2px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.4); background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; padding: 5px 11px 0 13px; text-overflow: ellipsis; width: 500px; } .location-stack li:nth-child(1) { z-index: 3; margin-left: 50px; } .location-stack li:nth-child(2) { z-index: 2; margin-left: 60px; } .location-stack li:nth-child(3) { z-index: 1; margin-left: 70px; } 

 <div class="location-stack"> <ul> <li>Fav 1</li> <li>Fav 2</li> <li>Fav 3</li> </ul> </div>