當動畫運行時，CSS動畫出現在頂部

我有一個css動畫，當用戶按下驗證按鈕（並且輸入字段無效）時，會在窗體上方顯示錯誤消息框。當動畫運行時，CSS動畫出現在頂部

動畫運行時，我的問題是，出現在表格上方的消息框。動畫完成後，消息框如預期的那樣位於下面。

如何讓動畫在其他DIV下運行？我試圖改變z-index沒有任何成功。

見琴：https://jsfiddle.net/FlorentM/zhp9qb8z/15/

#requestQuoteBox .alert.ng-hide-remove { 
    transition: 5000ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all; 
} 

#requestQuoteBox .alert.ng-hide { 
    opacity: 0; 
    margin-bottom: -50px; 
}

來源

2016-05-02 Florent

的z-index是正確的設置，但你可能已經把它應用到了錯誤的元素。請記住，內聯樣式將覆蓋其他樣式，除非用！重要（例如'z-index：100！important'）標記，並且基於腳本的動畫可能會使用內聯樣式。 – TheThirdMan

實際上，具有定位和z-index的操作有所幫助。

#requestQuoteBox .form-group { 
    position: relative; 
    z-index: 2; 
} 

#requestQuoteBox .alert { 
    position: relative; 
    z-index: 1; 
}

嘗試添加這些屬性到您的CSS，你會看到所需的行爲。

https://jsfiddle.net/mityaustinov/yzwjd8ps/2/

來源

2016-05-02 11:07:33

謝謝，我想我沒有考慮從父母繼承的絕對定位，這就是爲什麼z-index不起作用 – Florent

我認爲這個問題不是絕對定位的繼承，而是存在位置屬性。要使z-index工作，您需要首先將元素定位爲絕對，固定或相對。沒有它，z-index是無用的。 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index –

不知道這一點，謝謝你的加入 – Florent

當動畫運行時，CSS動畫出現在頂部

回答

相關問題