CSS中的Z-index行爲奇怪

我想在頁面中的某些元素上使用z-index。基本上，我有一個服務員和回覆箱的聯繫表格。聯繫表格在不同地方的頁面上使用，並且工作正常...CSS中的Z-index行爲奇怪

發送按鈕被按下，overlay-1覆蓋表單，ajax響應觸發一個覆蓋覆蓋-1的感謝信箱

現在，這一切工作正常的頁面上相對定位的形式。然而，儘管表單使用了相同的類，但我仍然可以彈出一切，但是我的z-index並未被尊重。

任何人都可以給我任何指針？

亞歷

HTML：

<div id="popuporderform" class="orderform"> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div> 
<!-- .orderspinner injected here -->

CSS：

/* -- ORDER FORM -- */ 
div.orderform { 
    width: 220px; 
    background-color: #fff; 
    height: 300px; 
} 

// This ID is for the pop up version of the form and is not used in the 
// form that is within the layout of the page 
#popuporderform {   
    position: absolute; 
    top: 100px; 
    left: 100px; 
    z-index: 200; 
} 

// this is the overlay with spinner in it -- this DOES overlay the form 
.orderspinner { 
    position: absolute; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); 
    z-index: 250; 
    background: #fff; 
} 

// This is the thank-you box - it should appear over the .orderspinner (but isn't) 
.resultBox { 
    display: block; 
    width: 150px; 
    height: 100px; 
    background-color: #fff; 
    position: absolute; 
    z-index: 300; 
    border: 1px red solid; 
    color: #000; 
}

FIXED：

我注入了覆蓋到的股利，而不是外面，因此將其放入同z-index上下文。

HTML：

<div id="popuporderform" class="orderform"> 
    <!-- .orderspinner injected here --> 
    <!-- .resultBox injected here --> 
    <form method="post"> 
     <input name="name" type="text" /> 
     <input class="send" type="submit" value="Send" /> 
    </form> 

</div>

來源

2010-11-29 beingalex

你需要發佈你的HTML和CSS。沒有辦法只用你的描述來幫助你。 – Strelok 2010-11-29 11:00:48

你能更具體嗎？這需要太多的幻想，你不知道我是否按照你的意思去成像。在那裏放一些代碼片段，試着只告訴你的問題的核心。 – fifigyuri 2010-11-29 11:02:43

對不起，我現在在我的文章中發佈了CSS和HTML – beingalex 2010-11-29 11:16:37

這段時間我有麻煩了。我的問題原來被連接到堆棧上下文，基本上當你有一個帶有z-index的元素時，它會在它內部開始一個新的堆棧上下文，這意味着元素的z-index不會與元素的z-index進行比較在外面。什麼增加了事情的複雜性，IE 6-7（我不知道大約8）在元素被定位時（絕對的，相對的）開始一個新的堆棧上下文。所以我會檢查你的彈出下拉到根的元素，並嘗試給他們一個高z指數，看看是否修復它。通過一些試驗和錯誤，你可能會發現問題。

來源

2010-11-29 11:06:13 Daniel

這是否應該是在後臺使用z-index的代碼？你有沒有嘗試將z-index改爲可觀的大值以查看它是否與其他組件競爭？

難以一味地想到別的。

來源

2010-11-29 11:02:07 Mrki

CSS中的Z-index行爲奇怪

回答

相關問題