1

I've noticed that when I try to set the z-index of a page element using inline style, px gets added to the value automatically but z-index needs a number not a pixel value.

So the web-browser won't accept it as a valid value and so Z-index effectively doesn't work because of it.

I'm doing

{
  "z-index" => -1
}
Thermatix
  • 2,757
  • 21
  • 51

1 Answers1

3

Style attributes should be specified in camel case. For css z-index: -1; write { zIndex: -1 }.

React.js converts css declarations from camel case to their proper format

React also automatically adds the 'px' suffix to unit-less property values, with some exception as outlined in these docs.

ajjahn
  • 182
  • 5
  • I see, I think it's stupid but I guess if that's the way it has to be then that's the way it has to be. – Thermatix Jan 14 '16 at 10:08
  • 1
    The choice was most likely made by the React.js team to play nice with JSON key formatting. React.rb currently has an open issue regarding how to better handle this situation: https://github.com/zetachang/react.rb/issues/108 . – ajjahn Jan 14 '16 at 14:08