'How to set z-index on a component?

Tried using the 'zindex' prop, as suggested here: https://github.com/facebook/react/issues/1456

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

Doesn't work. Also tried 'zindex="1"'

Any ideas?

react-bootstrap


Solution 1:[1]

you need to assign it using the style={} construct. Try this:

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

Solution 2:[2]

  1. always remember to use camel case. zindex becomes zIndex. margin-right becomes marginRight.

  2. you must call style. style={{ zIndex = 1}}

  3. you may want to pass relative or absolute. 

                  <div style={{ position: 'relative', zIndex: '1' }}>
                    bottom
                </div>
                <div style={{ position: 'relative', zIndex: '2' }}>
                    top
                </div>

Solution 3:[3]

Try this way...

style={{zIndex: '100'}}

Solution 4:[4]

when you are applying z-index then definitely you are trying to priorities your new part of code. So you also need to check if there are any other z-index with higher value which might be restricting your new z-index value

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

.applyZIndex {
 z-index : 1;
}

Solution 5:[5]

This works for me: style={{zIndex:1}}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eric S. Bullington
Solution 2
Solution 3 Samir Sales
Solution 4 Bishal Jain
Solution 5 Ripu Daman Sharma

Related Questions