0

I want to set a image on my CSS3 animation. So I used z-index:55 for animation image and z-index:56 for top image. But I cannot do it.

Here I want to show some animation inside my TV. So its is important for me to replace TV image over animation. (For my responsive issue I avoid to used image as background)

Please see my example fiddle here

koc
  • 955
  • 8
  • 26
  • Your elements are in different stacking contexts—z index works only if the elements are siblings of each other. – Terry Oct 15 '15 at 07:47

4 Answers4

2

z-index will only work on elements with a css position.

Thaillie
  • 1,362
  • 3
  • 17
  • 31
2

Multiple problems there:

  • 1 as Terry commented - elements needs to be syblings.
  • 2 as alireza safain said, you need to have postion, defined on both elements

so your fiddle could be updated like this: 

.tv {
 position: relative;
 z-index: 100;
}

https://jsfiddle.net/s9s1mbxv/1/

This will place the swirl into the background but will still overflow over the image. This could be partialy solved with setting huge border on the tv and offseting it back with top/left, but that's a bit silly

.tv {
    position: relative;
    z-index: 100;
    border: 200px solid #fff;
    top: -100px;
    left: -100px;
}

better solution is to add white background to the tv image.

nakashu
  • 1,058
  • 12
  • 21
0

Add position to the TV element.

According to w3s:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Alex
  • 8,461
  • 6
  • 37
  • 49
0

Addition to @Thaillie answer:

z-index will only work on elements with as css property position except position value static.

example : if you will use position:static; you can't use z-index

You can check here about position static

Community
  • 1
  • 1
Butani Vijay
  • 4,181
  • 2
  • 29
  • 61