Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

overlapping components with zIndex does not seem to work.

See original GitHub issue

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 8.9.4
  Yarn: Not Found
  npm: 5.7.1
  Watchman: Not Found
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.0 => 0.52.0

Expected Behavior

Adding higher zIndex to a target component should over other components even if they are outside the parent container of the target component.

Actual Behavior

zIndex does not work.

Steps to Reproduce

https://snack.expo.io/@aprilmintacpineda/zindex-issue

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
nguyenvanphuc2203commented, Jul 5, 2018

i am use absolute and margin property to resovle this issue: example:

<View style={{ flex: 1}}>
      <View style={{position:'absolute',top:0,zIndex:10}}></View>
     <View style={{marginTop:25}}></View>
</View>
0reactions
hramoscommented, Mar 15, 2018

https://github.com/facebook/react-native/issues/698 has additional discussion about this towards the end of the thread.

Read more comments on GitHub >

github_iconTop Results From Across the Web

4 reasons your z-index isn't working (and how to fix it)
It seems simple at first- a higher z-index number means the element will be on top of elements with lower z-index numbers.
Read more >
Elements not overlapping with z-index - Stack Overflow
I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out...
Read more >
Why your z-index isn't working - DEV Community ‍ ‍
z-index is a CSS property that allows you to set the stacking order of positioned elements in the DOM. Here's how to specify...
Read more >
Stacking overlapping views with zIndex in Expo and React ...
Learn how to stack overlapping views with zIndex. zIndex is the Expo and React Native analog of CSS's z-index property which lets the...
Read more >
z-index - CSS-Tricks
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

getCurrentActivity sometimes null inside componentDidMount

Next page

[0.54] [iOS] Selection jumps to end of TextInput on every change