zIndex, is it possible #1076

Closed
JohnyDays opened this Issue Apr 30, 2015 · 22 comments

Comments

Projects
None yet
@JohnyDays
Contributor

JohnyDays commented Apr 30, 2015

I was using the following to simulate zIndex:

transform: [{'translate':[0,0,1]}] 

as a style property
It worked for a while, but now an error has appeared saying it is invalid(even though it worked for the last day)
Is there another way to do zIndex, I have a position:'absolute' element inside another position:'absolute' element, and the inner element is appearing behind the parent element, the above style corrected this, but it no longer works.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Apr 30, 2015

Collaborator

The order that you place the elements in determines its layout order, so if you put something at the end it will appear on top if you use position: absolute. Alternatively you can use my library react-native-overlay to bring anything to the front.

Collaborator

brentvatne commented Apr 30, 2015

The order that you place the elements in determines its layout order, so if you put something at the end it will appear on top if you use position: absolute. Alternatively you can use my library react-native-overlay to bring anything to the front.

@JohnyDays

This comment has been minimized.

Show comment
Hide comment
@JohnyDays

JohnyDays May 4, 2015

Contributor

Maybe I didn't explain myself correctly, I have a sequence of items placed using position:'absolute' and then inside each one of them I have another position:'absolute' item (these items are children of the parent absolutely positioned items), which is supposed to appear on the corner of each of these items, but instead appears behind them.

Contributor

JohnyDays commented May 4, 2015

Maybe I didn't explain myself correctly, I have a sequence of items placed using position:'absolute' and then inside each one of them I have another position:'absolute' item (these items are children of the parent absolutely positioned items), which is supposed to appear on the corner of each of these items, but instead appears behind them.

@amitverma

This comment has been minimized.

Show comment
Hide comment
@amitverma

amitverma May 4, 2015

You should post some code. I have the same setup and things are working fine for me.

You should post some code. I have the same setup and things are working fine for me.

@JohnyDays

This comment has been minimized.

Show comment
Hide comment
@JohnyDays

JohnyDays May 4, 2015

Contributor

screen shot 2015-05-04 at 12 06 51 pm

If i remove the transform: [{'translate':[0,0,1]}] style, those icons appear behind the posts e.g they don't appear.
Both the posts and the icons are absolutely positioned, and the icons are children of the posts.

Contributor

JohnyDays commented May 4, 2015

screen shot 2015-05-04 at 12 06 51 pm

If i remove the transform: [{'translate':[0,0,1]}] style, those icons appear behind the posts e.g they don't appear.
Both the posts and the icons are absolutely positioned, and the icons are children of the posts.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 4, 2015

Collaborator

@JohnyDays - are the icons the last child of the posts?

Collaborator

brentvatne commented May 4, 2015

@JohnyDays - are the icons the last child of the posts?

@JohnyDays

This comment has been minimized.

Show comment
Hide comment
@JohnyDays

JohnyDays May 4, 2015

Contributor

They are the first child, but the following elements are not absolutely positioned.
Is that the problem? This is a slight deviation from the way the web works I believe, but I might be wrong on that would have to test. Will try changing that and close the issue if it worked.

Contributor

JohnyDays commented May 4, 2015

They are the first child, but the following elements are not absolutely positioned.
Is that the problem? This is a slight deviation from the way the web works I believe, but I might be wrong on that would have to test. Will try changing that and close the issue if it worked.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 4, 2015

Collaborator

@JohnyDays - yup, make them the last child, that will fix it

Collaborator

brentvatne commented May 4, 2015

@JohnyDays - yup, make them the last child, that will fix it

@JohnyDays

This comment has been minimized.

Show comment
Hide comment
@JohnyDays

JohnyDays May 4, 2015

Contributor

It did fix it, thanks for the help.

I don't know how relevant it is for the project to maintain similar behaviour to regular css/html, but here's a js fiddle demonstrating this differs from what would happen on the web, where an absolutely positioned child is always on top of it's siblings.

https://jsfiddle.net/m39z3bjb/1/

Contributor

JohnyDays commented May 4, 2015

It did fix it, thanks for the help.

I don't know how relevant it is for the project to maintain similar behaviour to regular css/html, but here's a js fiddle demonstrating this differs from what would happen on the web, where an absolutely positioned child is always on top of it's siblings.

https://jsfiddle.net/m39z3bjb/1/

@JohnyDays JohnyDays closed this May 4, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 4, 2015

Collaborator

cc @vjeux re: consistent behaviour with web

Collaborator

brentvatne commented May 4, 2015

cc @vjeux re: consistent behaviour with web

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux May 5, 2015

Contributor

On React Native we have position: relative by default. This has the behavior that those children are on the same z-index space as absolute children and your assumption doesn't hold true anymore: https://jsfiddle.net/m39z3bjb/2/

Thanks a lot for the jsfiddle, we really want to be compatible with the web!

Contributor

vjeux commented May 5, 2015

On React Native we have position: relative by default. This has the behavior that those children are on the same z-index space as absolute children and your assumption doesn't hold true anymore: https://jsfiddle.net/m39z3bjb/2/

Thanks a lot for the jsfiddle, we really want to be compatible with the web!

@bradynapier

This comment has been minimized.

Show comment
Hide comment
@bradynapier

bradynapier Oct 10, 2015

Not sure how relevant it is, but I did make a little module to help with this type of thing. It allows you to define a key to order it's children by

 <Order by='z'>  
  <View z={2} style={{backgroundColor: 'red', position: 'absolute', left: 5, height: 100, width: 50}}>
    <Text>1</Text>
  </View>
  <View z={1} style={{backgroundColor: 'blue', position: 'absolute', left: 5, height: 50, width: 100}}>
    <Text>2</Text>
  </View>
</Order>

So that when you do something like this, 2 would be on bottom. Although I would imagine this breaks down when not having an index for every item, could be updated easily to be more powerful I am sure.

https://www.npmjs.com/package/react-native-order-children

Not sure how relevant it is, but I did make a little module to help with this type of thing. It allows you to define a key to order it's children by

 <Order by='z'>  
  <View z={2} style={{backgroundColor: 'red', position: 'absolute', left: 5, height: 100, width: 50}}>
    <Text>1</Text>
  </View>
  <View z={1} style={{backgroundColor: 'blue', position: 'absolute', left: 5, height: 50, width: 100}}>
    <Text>2</Text>
  </View>
</Order>

So that when you do something like this, 2 would be on bottom. Although I would imagine this breaks down when not having an index for every item, could be updated easily to be more powerful I am sure.

https://www.npmjs.com/package/react-native-order-children

@ktoh

This comment has been minimized.

Show comment
Hide comment
@ktoh

ktoh Nov 24, 2015

+1 to re-open this issue.

There are situations where one cannot rely on rendering order to enforce Z-index: the two are orthogonal principles, which is why CSS implements z-index. For example, a card or a button console may need to be rendered above some descriptive text (in flex-order), but still sit in front of it (e.g. to capture touch first, to provide layout overlap, etc).

Also see https://productpains.com/post/react-native/zindex-support/

ktoh commented Nov 24, 2015

+1 to re-open this issue.

There are situations where one cannot rely on rendering order to enforce Z-index: the two are orthogonal principles, which is why CSS implements z-index. For example, a card or a button console may need to be rendered above some descriptive text (in flex-order), but still sit in front of it (e.g. to capture touch first, to provide layout overlap, etc).

Also see https://productpains.com/post/react-native/zindex-support/

@vjeux vjeux reopened this Nov 24, 2015

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 24, 2015

Collaborator

The approach I would take is to reorder the native views so that from the perspective of React and css-layout there has been no reordering.

Collaborator

ide commented Nov 24, 2015

The approach I would take is to reorder the native views so that from the perspective of React and css-layout there has been no reordering.

@MattFoley

This comment has been minimized.

Show comment
Hide comment
@MattFoley

MattFoley Jan 6, 2016

Contributor

I should chime in that there seems to be a very old iOS bug that causes the view drawing hierarchy to break when modifying the m34 value of the CATransform3D of a given UIView's backing layer. I'm guessing that this is how RCTViewManager is achieving mimicking CSS's perspective value? This has been an issue since iOS 5 as far as I know.

My workaround has always been to modify the layer.zPosition of affected views to manually override the broken UIView hierarchy. I don't know of any other work around myself.

Contributor

MattFoley commented Jan 6, 2016

I should chime in that there seems to be a very old iOS bug that causes the view drawing hierarchy to break when modifying the m34 value of the CATransform3D of a given UIView's backing layer. I'm guessing that this is how RCTViewManager is achieving mimicking CSS's perspective value? This has been an issue since iOS 5 as far as I know.

My workaround has always been to modify the layer.zPosition of affected views to manually override the broken UIView hierarchy. I don't know of any other work around myself.

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Apr 10, 2016

Contributor

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/zindex-is-it-possible

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

Contributor

mkonicek commented Apr 10, 2016

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/zindex-is-it-possible

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

@mkonicek mkonicek added the Icebox label Apr 10, 2016

@mkonicek mkonicek closed this Apr 10, 2016

@SudoPlz

This comment has been minimized.

Show comment
Hide comment
Contributor

SudoPlz commented Apr 19, 2016

@scazzy

This comment has been minimized.

Show comment
Hide comment
@scazzy

scazzy Dec 27, 2016

For everyone else, zIndex is supported by react native. Please refer to this documentation - http://facebook.github.io/react-native/releases/0.39/docs/layout-props.html#zindex

scazzy commented Dec 27, 2016

For everyone else, zIndex is supported by react native. Please refer to this documentation - http://facebook.github.io/react-native/releases/0.39/docs/layout-props.html#zindex

@SudoPlz

This comment has been minimized.

Show comment
Hide comment
@SudoPlz

SudoPlz Dec 27, 2016

Contributor

Amazing job!

Contributor

SudoPlz commented Dec 27, 2016

Amazing job!

@Noitidart

This comment has been minimized.

Show comment
Hide comment
@Noitidart

Noitidart Jul 11, 2017

zIndex has some issues on Android - #8968 (comment)

It is working fine in iOS and UWP (windows)

zIndex has some issues on Android - #8968 (comment)

It is working fine in iOS and UWP (windows)

@notgiorgi

This comment has been minimized.

Show comment
Hide comment
@notgiorgi

notgiorgi Nov 26, 2017

For me re-ordering JSX is the only solution right now, if components I want to position are not siblings

Sometimes, Even though I want component A to be before B in markup I still put it like this:

<Container>
  <B />
  <A />
</Container>

and I give container row-reverse/column-reverse that allows me to show some deep child of A on top of the B even though zIndex doesn't work and also maintain the order.

notgiorgi commented Nov 26, 2017

For me re-ordering JSX is the only solution right now, if components I want to position are not siblings

Sometimes, Even though I want component A to be before B in markup I still put it like this:

<Container>
  <B />
  <A />
</Container>

and I give container row-reverse/column-reverse that allows me to show some deep child of A on top of the B even though zIndex doesn't work and also maintain the order.

@cyclone747

This comment has been minimized.

Show comment
Hide comment
@cyclone747

cyclone747 Mar 14, 2018

we all know "re-ordering JSX is the solution right now" but when we can't re-order elements----

what should we do ????

we all know "re-ordering JSX is the solution right now" but when we can't re-order elements----

what should we do ????

@RohanGada

This comment has been minimized.

Show comment
Hide comment
@RohanGada

RohanGada Apr 18, 2018

if you have any elevation style prop put in the style, remove it. Solved my zIndex problem.

if you have any elevation style prop put in the style, remove it. Solved my zIndex problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment