[英]Z-index not working on IE
以下代碼在IE 11中可以正常工作,但是當我在IE8上測試頁面時,Main_Box的底部與Intro DIV的頂部不重疊。
如果我從“簡介”中刪除了背景色,則可以看到它后面的Main_Box的底部,但無法使其顯示在前面。
我認為這可能是此頁面上引用的錯誤...
...因此嘗試將其包裝在絕對DIV中以重置z-index,但無濟於事。
<div style="position: relative; z-index: 3000">
<section id="intro">
<h1>
EXAMPLES
</h1>
<div class="animation-container">
<div id="object" class="animate fadeIn"></div>
</div>
<div id="intro-copy">
<img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
<p>Scroll down</p>
</div>
</section>
</div>
可以使用的IE11 HTML:
<section id="main">
<div class="Main_Box">
<h10>
“People often represent the weakest link in the security chain”
</h10>
<h2>
Contact us today to see how we can help.
</h2>
</div>
</section>
<section id="intro">
<h1>
EXAMPLES
</h1>
<div class="animation-container">
<div id="object" class="animate fadeIn"></div>
</div>
<div id="intro-copy">
<img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
<p>Scroll down</p>
</div>
</section>
的CSS
#main{
height: 420px;
width: 100%;
position: relative;
top: 130px;
}
.Main_Box {
border-width: 5.547px;
border-color: rgb( 255, 255, 255 );
border-style: solid;
border-radius: 10px;
background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
position: relative;
width: 70%;
height: 270px;
margin: 0 auto;
position: relative;
z-index: 9999;
padding: 30px;
}
#intro{
height: 650px;
width: 100%;
position: absolute;
background-color: #ffffff;
}
任何幫助,不勝感激。
這是我的開發站點的鏈接:
謝謝,
嘗試在部分級別分配z-index; #main
和#intro
是同級,因此就舊版瀏覽器而言,它們更有可能位於相同的堆棧上下文中。
#main { z-index: 9999; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.