CSS3 Div位置

Question

I have a loading circle that uses CSS3 Animations. Once the loading circle has finished animating, a empty div fades in. I am having problems placing the empty div ontop of another div. Any help is much appreciated.

jsFiddle

Answer 1

add position:absolute; and top:0; to box style

.box {
   background: #dedede;
   height: 200px;
   width: 200px;
   animation: in 3s forwards;
   position:absolute;
   top:0;
}

have fun :)

Answer 2

you can use z-index to place elements in 'layers'.

z-index:1000;

Would make an element 1000 layers above 0 respectively.

Answer 3

jsFiddle NEW jsFiddle includes elements above circles.

Create a new CSS rule for .wrap as follows:

.wrap{
  float: left;
}

There is no need for you to use z-index property because you already have the DOM working with you, not against you.