具有堆叠上下文的Z索引
[英]Z-index with stacking context
问题描述
I have html tree in shortcut 
我在快捷方式中有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 is on the left side of page, document-form on the right. 文档图像位于页面的左侧，文档形式位于右侧。 And I want display some part of input over Document-image. 我想在文档图像上显示输入的一部分。 But now z-index not working. 但是现在z-index无法正常工作。 I set for this elements position absolute or relative. 我为此元素设置了绝对或相对位置。
1 个解决方案
解决方案1
0 2018-05-17 12:04:08
You need to have div tag as position: relative . 您需要将div标签作为position: relative 。 use position: absolute on input tag. 使用position: absolute输入标签上的position: absolute 。 use margin-left to align it accordingly. 使用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>
hope it helps! 希望能帮助到你！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.