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

将position: relative;与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

此方法的验证使用如下

<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设置为相对来为你的索引创建一个0，然后像z-index 0一样将它作为主要底层，这样你可以根据z-index

来避免其他错误

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

3 个答案: