[英]Z-index is not stacking
我已經嘗試了很長時間,並且已經閱讀了許多文章,但我還是聽不懂! 我試圖將那個小圖標移到標題的左側,但是由於某種原因,它堆疊在父元素下方!
這是我的CSS:
.step__content { margin-top: 120px; position: relative; div.ui-accordion-header { margin-left: 30px; &:after { content: ''; position: absolute; height: 20px; width: 20px; left: -7px; background-image: url('../images/i.svg'); z-index: 100; } } }
第一個:after元素是圖標!
這是一張圖片:
我希望圖標位於標題的左側! 但是當我向左推時,它會降到下方嗎? 該圖標的完整圖像不可見,因為下面有一半!
我認為實際發生的是偽元素剛剛超出overflow: hidden;
元件...
這對我有用(即使您刪除了z-index樣式)。 如您所見,psuedo元素位於文本上方。 嘗試將:after z-index更改為-5,它會低於以下值。
.step__content { margin-top: 120px; position: relative; } .ui-accordion-header { position: relative; margin-left: 50px; z-index: 1; } .ui-accordion-header:after { content: ''; position: absolute; display: block; height: 30px; width: 30px; margin: auto; top: 0; bottom: 0; left: -20px; background-image: url('https://via.placeholder.com/150'); background-size: cover; background-position: center; z-index: 5; }
<div class="step__content"> <div class="ui-accordion-header"> <p>Headers</p> </div> </div>
我在偽元素之前使用。
.step__content {
margin-top: 120px;
position: relative;
div.ui-accordion-header {
margin-left: 30px;
&::before {
content: 'testing';
height: 20px;
width: 20px;
z-index: 100;
}
}
}
<div class="step__content">
<section class="ce_accordionStart ce_accordino block">
<div id="ui-id-1" class="ui-accordion-header ui-accordion-header-active ui-state-active">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">
Header
</span>
</div>
</section>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.