html - 使内部链接的 z-index 仅高于父容器

Question

我想知道这样的事情是否可能：

<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="meta" style="z-index:1; position: relative;">
    <div class="description">description <a href="link" style="z-index:3; position: relative;">link</a> description</div>
</div>

我希望z-index: 3;链接位于其上方arrow-left但description下方。这可以通过上述 HTML 结构实现吗？

Answer 1

此方法的验证使用如下

<div class="hold" style="z-index:0; position:relative"><!--Outdiv set relative and z-index to 0 here -->
   <div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
   <div class="meta" style="z-index:1; position: relative;">
       <div class="description">description <a href="link" style="z-index:3; position: relative;">link</a> description
   </div>
</div>

这样，您可以通过将外部 div 设置为相对，然后将其作为主楼层（如 z-index 0）为您的索引设置接地 0，这样您以后可以根据 z-index 避免其他故障

Answer 2

你的问题在逻辑上是错误的！

只需将 (.arrow-left) 放在 (.meta) 中，它就会起作用。

<div class="meta" style="z-index:1; position: relative;">
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="description">description <a href="link" style="z-index:3; position: relative;">link</a> description</div>
</div>

Answer 3

position: relative;与_z-index