CSS3动画Z索引越野车？

Question

I have been experimenting with css3 animations lately. I was noticing that it seems as though it is not possible to place html elements over css3 animations using z-index.

Here's my fiddle: http://jsfiddle.net/arcco96/tkwdqqq3/2/

It could be that I am creating the element dynamically.

Heres the 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'
  });
});

(I eventually want the button to be on top of the timer.)

If there's a work around I would like to hear it.

Answer 1

Sorry, it was in the Fiddle.

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

try this