Question

我在快捷方式中有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无法正常工作。我为这个元素设置绝对或相对位置。

Answer 1

您需要将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>

希望它有所帮助！

具有堆叠上下文的Z-index

1 个答案: