CSS中的變量z-index父親和訂單孩子

我想知道，我有一些父母元素與一些孩子。假設父母有一個Xz-index。我想讓第一個孩子z-index成爲父母z-index減1.下一個孩子父母減2，第三減3等等。這一切都必須是可變的，所以沒有硬編碼！是的，我可以在這個例子中改變HTML元素的順序，但是我通過外部服務接收這些元素，所以這是不可能的。CSS中的變量z-index父親和訂單孩子

HTML

<div class="parent"> Z-index = X 
    <div class="child" id="child_1">Z-index = X - 1</div> 
    <div class="child" id="child_2">Z-index = X - 2</div> 
    <div class="child" id="child_3">Z-index = X - 3</div> 
</div>

在這個例子中，我要上孩子的頂部我的父母，然後就#child_2和#child_3底部頂部#child_1。

這可能與JS，但我寧願使用CSS，我可以改變這隻與CSS？

FIDDLE

非常感謝！

來源

2016-02-05 djl

對不起，它一點我不清楚。 –

沒有JS就不可能。因爲css沒有任何循環的可行性，但你使用SASS＆LESS – Sandeep

有人會糾正我，如果我錯了，但我很確定_child element_不可能具有比它更低的'z-index' _parent container_。 – Rounin

我找不到CSS的解決方案......

我用jQuery做它和它的作品：

$(".child").each(function(index){ 
    $(this).css("z-index", "-" + index); 
});

來源

2016-02-08 11:23:56 djl

CSS中的變量z-index父親和訂單孩子

回答

相關問題