Question

我与div有几个兄弟position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%;。实际上，它们是消息框。它们是由第三方ASP.NET控件生成的，我无法在ASP.NET文件中更改它们的顺序。但是我想将它们的重叠顺序改为反转：首先声明显示在顶部。有可能吗？

Answer 1

如果你知道你的div的长度，你可以使用nth-child 我们假设您的div长度为4，您可以像这样使用z-index

div:last-child{z-index: 4}
div:nth-child(3){z-index: 3}
div:nth-child(2){z-index: 2}
div:first-child{z-index: 1}

Answer 2

在这里：https://jsfiddle.net/mooreinteractive/ffh5t88g/9/

基本上，我将div列表转换为数组，然后使用数组的.reverse（）方法。奇怪的部分是将它从数组转换回HTML ...

第一部分，将其转换为数组，并从DOM中清除原始div：

var divs = document.querySelectorAll('div.msg');
var divsArr = Array.prototype.slice.call(divs, 0);
document.querySelector('#cont').innerHTML = '';

然后，反转数组，并使用数组的.map（）方法将其转换回HTML：

divsArr.reverse().map(function(htmlObj){
    document.querySelector('#cont').appendChild(htmlObj);
});

你可以让它更清洁一点，这假设它们在id =“cont”的父div中，所以你当然要调整它，以及你如何清除原来的div。

以相反的顺序显示div

2 个答案: