根据页面渲染顺序反转 z-index
[英] reversing z-index based from page render order
本文介绍了根据页面渲染顺序反转 z-index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
示例标记:
<h2>触发器</h2><div>这是一些内容</div>
<div class="wrapper"><h2>触发器</h2><div>这是一些内容</div>
<div class="wrapper"><h2>触发器</h2><div>这是一些内容</div>
示例 CSS:
.wrapper {z-index: 1}.wrapper div {显示:无；位置:绝对；}
通过 javascript (jQuery)，我将一个点击事件附加到每个 h2，然后将内容 div 切换到显示:块.
目的是将这些可扩展的内容块与页面上的其他任何内容重叠.
问题是我希望第一个与第二个重叠，如果它们都打开，第二个将与第三个重叠.
然而，由于每一个都在前一个之后渲染，实际的堆叠顺序是相反的(最后一个创建的内容 div 覆盖了之前创建的一次).
是否有一种巧妙的方法可以通过 CSS/HTML 逆转这种行为?或者是让页面呈现的解决方案，然后通过javascript，按顺序抓取所有内容div并以相反的顺序给它们每个z-index?
更新:
这里有一些更具体的标记:
<div style="padding: 10px;">Hello World<div style="position: relative; top: -5px;"><div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>重叠</p></div>
<div style="padding: 10px;">Hello World<div style="position: relative; top: -5px;"><div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>重叠</p></div>
<div style="padding: 10px;">Hello World<div style="position: relative; top: -5px;"><div style="position: absolute; background: red;"><p>This</p><p>is</p><p>重叠</p></div>
以下标记将生成 3 个 div，每个 div 都有一个重叠的彩色 div.由于渲染顺序，最后一个绝对定位的 DIV(红色)将位于它之前的 DIV(橙色)之上.
我不知道我需要应用什么类型的 z-index 才能使第一个彩色重叠 div 位于顶部.z-index 从上到下的顺序应该反映标记(顶部黄色，底部红色).
当然，这与标准相反.
我愿意使用 javascript 来修复此后显示问题，但我仍在努力寻找我需要通过 javascript 应用的确切 CSS.我追求的是可行的吗?
解决方案
所以这里仍然没有答案，我只是做了类似的事情，即使我的解决方法是 100% hack，如果其他人来到这个页面，它确实有效！
#nav ul li:nth-child(1) {z-索引:10；}#nav ul li:nth-child(2) {z-index:9;}#nav ul li:nth-child(3) {z-索引:8；}#nav ul li:nth-child(4) {z-index:7;}#nav ul li:nth-child(5) {z-索引:6；}#nav ul li:nth-child(6) {z-索引:5；}
我刚刚有了它，只要我没有超过 10 个元素，它似乎就可以工作...
Example Markup:
<div class="wrapper">
<h2>Trigger</h2>
<div>This is some content</div>
</div>
<div class="wrapper">
<h2>Trigger</h2>
<div>This is some content</div>
</div>
<div class="wrapper">
<h2>Trigger</h2>
<div>This is some content</div>
</div>
Example CSS:
.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}
Via javascript (jQuery) I'm attaching a click event to each h2 that will then switch the content div to display: block.
The intent is that these are expandable blocks of content that will overlap anything else on the page.
The catch is that I'd like the first one to overlap the second, which would overlap the 3rd in the event that all of them are open.
However, since each one is being rendered AFTER the previous one, the actual stacking order is reversed (The last content div created end sup overlaying the previously created once).
Is there a clever way of reversing this behavior with CSS/HTML? Or is the solution to let the page render, then via javascript, grab all of the content divs in order and give them each a z-index in reverse order?
UPDATE:
Here's some more specific markup:
<div style="padding: 10px;">Hello World
<div style="position: relative; top: -5px;">
<div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
</div>
</div>
<div style="padding: 10px;">Hello World
<div style="position: relative; top: -5px;">
<div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
</div>
</div>
<div style="padding: 10px;">Hello World
<div style="position: relative; top: -5px;">
<div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div>
</div>
</div>
The following markup will produce 3 divs, each with a colored div overlapping. Due to the render order, the last absolutely positioned DIV (red) will be on top of the one before it (orange).
I can't figure out what type of z-indexes I need to apply to get the FIRST colored overlapping div to be on top. The order from top-to-bottom in terms of z-index should mirror the markup (yellow on top, red on bottom).
This is, of course, reverse of the standard.
I'm willing to use javascript to fix this post-display but I'm still struggling for the exact CSS that I need to apply via javascript. Is what I'm after doable?
解决方案
So still no answer here, i just did something similar, even though my workaround is 100% hack, if anyone else comes to this page, it did work!
#nav ul li:nth-child(1) {
z-index:10;
}
#nav ul li:nth-child(2) {
z-index:9;
}
#nav ul li:nth-child(3) {
z-index:8;
}
#nav ul li:nth-child(4) {
z-index:7;
}
#nav ul li:nth-child(5) {
z-index:6;
}
#nav ul li:nth-child(6) {
z-index:5;
}
I just had that and as long as i didn't get over 10 elements it seems to work...
这篇关于根据页面渲染顺序反转 z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
