具有堆叠上下文的Z索引
[英]Z-index with stacking context
问题描述
我在快捷方式中有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>
文档图像位于页面的左侧，文档形式位于右侧。 我想在文档图像上显示输入的一部分。 但是现在z-index无法正常工作。 我为此元素设置了绝对或相对位置。
1 个解决方案
解决方案1
0 2018-05-17 12:04:08
您需要将div标签作为position: relative 。 使用position: absolute输入标签上的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的子级：“ auto”与z-index：0，CSS中的“堆栈上下文”是什么？
[英]Children of z-index: 'auto' vs z-index: 0, and what is “stacking context” in CSS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.