时间戳

首页 > 解决方案 > 具有堆叠上下文的 Z-index

html - 具有堆叠上下文的 Z-index

问题描述

我在快捷方式中有 html 树

<body>
  <document-list></document-list>
  <div>
    <document-image></document-image> => parentStaticContext: html z-index:20
    <document-form> => parentStaticContext: html z-index:30
        <input></input> => parentStaticContext: html z-index:1
    </document-form>
  </diV>
</body>

文档图像在页面左侧，文档形式在右侧。我想在 Document-image 上显示部分输入。但现在 z-index 不起作用。我为此元素设置绝对或相对位置。

标签： htmlcssangular

解决方案

您需要将div标签标记为position: relative. position: absolute在输入标签上使用。用于margin-left相应地对齐它。

<body>
  <document-list [style.position]="'relative'"></document-list>
  <div>
    <document-image></document-image> => parentStaticContext: html z-index:20
    <document-form > => parentStaticContext: html z-index:30
        <input [style.position]="'absolute'" class="margin-left-30px"></input> => parentStaticContext: html z-index:1
    </document-form>
  </div>
</body>

希望能帮助到你！

推荐阅读