如何在组件上设置z-index？

Question

按照这里的建议，尝试使用“zindex”属性：

https://github.com/facebook/react/issues/1456

<Input ref="username" type="text" label="Username" 
placeholder="Enter username" zindex={1} />

不起作用。尝试过 'zindex="1"'。

有任何想法吗？

- Robert Kovačević

Answer 1

你需要使用 style={} 结构来分配它。 试试这个：

<Input ref="username" type="text" label="Username" placeholder="Enter username" style={{zIndex:1}} />

- Blake

---

@Axel，你编辑了我的回答并使其不正确。如果你使用这种方式向React JSX DOM元素添加样式，你将收到以下错误信息："Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX." - Blake

Answer 2

1. 永远记得使用驼峰命名法。 z-index 变成 zIndex。 margin-right 变成 marginRight。

2. 你必须调用样式。 style={{ zIndex = 1}}

3. 你可能想传递相对或绝对。

<div style={{ position: 'relative', zIndex: '1' }}>
  bottom
</div>
<div style={{ position: 'relative', zIndex: '2' }}>
  top
</div> 
<Input ref="username" type="text" label="Username" placeholder="Enter username" zindex={1} />

- Lesly Revenge

Answer 3

尝试这种方法...

style={{zIndex: '100'}} 

- Samir Ribeiro

Answer 4

有时候你可能需要使用!important来强制应用你的样式。

例如：

style={{ zIndex: '1 !important' }};

- jhon26

Answer 5

当你应用 z-index 时，肯定是在尝试优先处理你的新代码部分。因此，你还需要检查是否有任何其他具有更高值的 z-index 可能会限制你的新 z-index 值。

<Input ref="username" type="text" label="Username" 
placeholder="Enter username" class = "applyZIndex" />

.applyZIndex {
 z-index : 1;
}

- Bishal Jain

---

在这里我们谈论的是React Native应用程序，以及你对HTML CSS的答案。 - Naved Khan

Answer 6

这对我有效：style={{zIndex:1}}

- Ripu Daman Sharma

---

这已经在其他答案中提到过了。 - Eric Aya