堆棧列表項假設我有一個增長的名單：CSS - 低於對方
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
......
</ul>
我想使它看起來像一個堆棧，這意味着前者的人將高於後者的。例如：
我想我可能要作出每個列表項浮動到左的東西，如left: -5px;接班，並降低Z-指數，但由於可能存在項目的不確定的數字，我不知道如何用CSS實現所有項目。
謝謝
浮法不起作用。以下是需要絕對（或至少相對）位置上的前兩種方法，根據位置參數和z索引：
ul {
list-style: none;
}
li {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #fa0;
border-radius: 50%;
text-align: center;
padding: 30px;
background: #fff;
}
li:nth-child(1) {
z-index: 3;
left: 20px;
}
li:nth-child(2) {
z-index: 2;
left: 120px;
}
li:nth-child(3) {
z-index: 1;
left: 220px;
}<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>ADDITION /第二溶液：
如果可以與其他方式堆疊的元素一起生活（請參閱下面的代碼片斷），這裏是一個純CSS解決方案，您不需要爲每個元素分別進行設置。你所需要的唯一額外的東西在裏面每個li元素的div：
編輯/其他修正：
爲了更好地實現一個分層像中包含的內容問題的形象，我顛倒了順序HTML和施加direction: rtl;到ul元件：
ul {
list-style: none;
direction: rtl;
text-align: left;
padding-left: 40px;
}
li {
display: inline-block;
width: 110px;
height: 100px;
overflow: visible;
}
li > div {
width: 90px;
height: 90px;
border: 3px solid #fa0;
border-radius: 50%;
text-align: center;
padding: 30px;
background: #fff;
}<ul>
<li><div>#3</div></li>
<li><div>#2</div></li>
<li><div>#1</div></li>
</ul>像這樣的東西可能會起作用，儘管它以相反的方式疊加。
以另一種方式對它進行虛擬堆疊需要更多的魔力。你可以通過使用float: right;而不是float: left;來實現它。您的UL將需要一些寬度和/或定位調整。它可以通過相反的方式對LI項目進行反向排序，通過在HTML中生成向後排列的列表，您可以反擊。如果你願意，我可以幫助更多。
ul {
display: inline-block
}
li {
list-style-type: none;
display: inline-block;
margin-left: -20px;
float: right;
background: red;
border: 1px solid black;
padding: 20px;
border-radius: 100%;
}<ul>
<li>#3</li>
<li>#2</li>
<li>#1</li>
</ul>爲答案。是的，關鍵是如何以其他方式堆疊它...你可以請分享一些代碼示例/想法如何實現？ –
我已經更新了我的答案，HTML列表現在已經「向後」排序，並且它已經漂移到右側。這也意味着該列表與右側對齊。爲了解決這個問題，我在UL風格中增加了「display：inline-block」。 –
我覺得這是一個很好的例子：
https://codepen.io/bdpavel/pen/MEJOKz
CSS
ul {
display: flex;
padding: 0;
list-style: none;
}
li {
display: flex;
width: 100px;
height: 100px;
margin-left: -40px;
border: 3px solid orange;
border-radius: 50%;
background: white;
align-items: center;
justify-content: center;
}
ul li:first-child {
margin-left: 0;
}
感謝您的回答。我認爲它是以另一種方式疊加的，是否可以顛倒堆疊順序 - 就像問題中的示例圖像一樣？ –
@AllanJiang - 我不是回覆者，但是您可以像[flex-direction：row-reverse;]（https://codepen.io/anon/pen/jGyYmO）這個例子一樣輕鬆地翻轉訂單。 – misterManSam
這裏是一個解決方案，使用js的一點幫助。
var lis = document.querySelectorAll('li');
var i = 1;
for (var li of lis) {
li.style.left = i * 50 + "px";
li.style.zIndex = lis.length - i;
i++;
}ul {
list-style-type:none;
position:relative;
}
ul li {
border:4px solid blue;
border-radius:50%;
display:inline-block;
width:100px;
height:100px;
position:absolute;
background-color:white;
text-align:right;
line-height:5em;
padding:8px;
}<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
也許像這樣的東西：https://www.w3schools.com/cssref/sel_nth-child.asp –
正如你可能已經被一個固定的物品無限多，翻譯金額（-5px）可能無法正常工作。你可以嘗試一個sigmoid類型的函數，它隨着項目的數量變爲無窮大而移動得越來越少，最終達到一個合理的值（比如-50px）。 – Dinesh
@Dinesh翻譯量不會增加，因爲他們的項目被添加到正確的？ –