我在快捷方式中有 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 在页面左侧，document-form 在右侧。我想在 Document-image 上显示部分输入。但是现在 z-index 不工作了。我为这个元素设置了绝对位置或相对位置。
最佳答案
您需要将 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>
希望对您有所帮助!
关于html - 具有堆叠上下文的 Z-index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50390853/