具有堆疊上下文的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.