Cannot Define 'z-Index' on fa-modifier/fa-surface

[CharlesVoita]

The html property 'fa-z-index' does not exist for 'fa-modifier' or 'fa-surface' and one cannot define z-Index on these FA elements. The current imperfect work around is set 'fa-perspective' on 'fa-modifier' and use the z-axis of 'fa-translate'.

From Famo.us /guides/pitfalls: "CSS z-indexing still applies in Famo.us. For Surfaces that share the same translation in z space, default DOM layering will be overridden by explicit CSS z-index values." This suggests that z-index should be modifiable.

[steveblue]

@CharlesVoita I think you are misinterpreting the quote from the pitfalls. transformZ is way more performant than altering the z-index and has the added benefit of using perspective. It isn't a workaround, its a completely different method. z-indexing should only be used to override z transformations. In the context of a view I am currently working on, I apply z-index to surfaces that contain copy to ensure it will never be overlapped by any other surface.

I don't think z-index needs a directive. You can use the setProperties method on any surface to set whatever css you desire.

[pencilcheck]

I wonder if there is a fa-properties directives for setting the properties for surfaces?

-- edit --

nvm, I saw it in the source code, you can just do

<fa-surface fa-properties='{zIndex: 1}'></fa-surface>

[CharlesVoita]

@steveblue Yeah, I have been using fa-translate and using the z for layering. I don't know if there is documentation on this, and it is obvious once you are in the weeds, but starting out this was unintuitive. I will close this, thank you!