2014-12-27 87 views
2

最近我一直在試驗css3動畫。我注意到,似乎無法將html元素放在使用z-index的css3動畫上。Css3動畫z-index越野車?

這裏是我的小提琴:http://jsfiddle.net/arcco96/tkwdqqq3/2/

這可能是因爲我是動態創建的元素。

繼承人的jQuery的:

var cv = $('.container').width(); 
var side = (.80 * cv); 

$("#btn1").click(function() { 
    jQuery('<div/>', { 
    class: 'timer', 
    }).appendTo('#center'); 

    var cw = $('.timer').width(); 
    $('.timer').css({ 
    'height': cw + 'px' 
    }); 


    jQuery('<div/>', { 
    class: 'mask', 
    }).appendTo('.timer'); 

    jQuery('<a/>', { 
    class: 'round-button', 
    href: 'http://example.com', 
    }).appendTo('.center'); 

    $('.round-button').css({ 
    'height': (cw - 20) + 'px', 
    'width': (cw - 20) + 'px' 
    }); 
}); 

(我最終想要的按鈕,可以對計時器的頂部)。

如果有周圍的工作,我想聽到它。

+0

把它放在計時器的中心,用這個http://www.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal-vertical-centering-css/ – 2014-12-27 18:33:40

+0

你從哪裏遇到問題?在鉻這似乎工作 – 2014-12-27 18:57:39

回答

0

對不起,它是在小提琴。

#btn1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    margin: -1em 0 0 -50px; 
    z-index: 9999999; 
} 

試試這個

+0

我已經試過,在小提琴和它似乎並沒有工作 – 2014-12-27 18:34:59

+0

[更新](http://jsfiddle.net/tkwdqqq3/3/) – 2014-12-27 18:42:13

+0

好吧,你讓它工作。順便說一句,試圖解決完美居中問題的負利潤率似乎並不奏效。它仍然在中心。 – 2014-12-27 18:43:42