堆叠顺序：如何渲染组件，使其出现在随后渲染的父母兄弟姐妹之上答案

【问题标题】：Stacking Order: How to render component so it appears on top of parents' sibling who renders afterwards堆叠顺序：如何渲染组件，使其出现在随后渲染的父母兄弟姐妹之上
【发布时间】：2017-05-16 15:46:40
【问题描述】：

在设置下拉列表 (react-native-menu) 样式时，我在 zIndex 和位置方面遇到了一些问题。我想让下拉列表在单击时显示在该场景中所有其他组件的顶部。我正在尝试使用 zIndex 和位置，但可能没有正确使用？

在我的代码（如下）中，我正在渲染一个层次结构，其中 Card > CardSection > 每个子组件的各种子组件。下拉列表由组件MenuContext（配置）和TopNavigation（主下拉列表）组成。

return (
<Card>
  <CardSection style={{zIndex: 2}}>
    <View style={thumbnailContainerStyle}>
      <Image style={thumbnailStyle}
        source={{ uri: "" }}
      />
    </View>
    <View style={headerContentStyle}>
      <Text style={headerTextStyle}>Tam</Text>
      <Text>tam@tam</Text>
    </View>
    <MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
      <TopNavigation/> //this is 
    </MenuContext>
  </CardSection>
  <CardSection style={{zIndex: 1}}>
    <Text style={{zIndex: 2}}>{props.post.body}</Text>
  </CardSection>
</Card>
)

所以下拉列表是第一个CardSection 的子项。我让它出现在它自己的父 CardSection 上，但我不能让它出现在第二个 CardSection 之后呈现的顶部。所以我不能让它显示在它父母的兄弟姐妹之上。

我不愿意使用某些插件或解决方法。

有什么想法吗？谢谢！！

【问题讨论】：

标签： react-native position css-position z-index

【解决方案1】：

所以在 z 轴上渲染弹出菜单变得如此困难的原因是它的父级的兄弟。因此，帮助我获得所需结果的原因是看起来更宏观，并将<ContextMenu/> 在组件层次结构中移到更高的位置，完全从这个组件中移出并进入它的父级。

我应该推断出这一点，因为我使用的原始包的文档在应用程序和 cmets 的入口点中有 ContextMenu，例如：

 // You need to place a MenuContext somewhere in your application,usually at the root. 
  // Menus will open within the context, and only one menu can open at a time per context.

我的错误是迷失在zIndex 和position 的微观世界中，并假设看起来像样式问题的问题应该通过样式解决方案来解决。我忘记了大局。

【讨论】：