是否有可能使用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。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;