Menu
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?
887
If you want to create a custom stacking order, you can use the z-index property on a positioned element. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.
An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
We set the z-index of the element by using the zIndex property in the element's style object. Multi-word property names are camelCased in the object we pass to the style prop in React, e.g. backgroundColor and zIndex. Notice that we used 2 sets of curly braces when setting the style prop on the element.
The z-index property specifies the stack order of an element. When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
The answer is a convention that eliminates the need for guesswork, and it’s the following: changing z-indices within a component should only affect that component, and nothing else. To put it differently, when dealing with z-index values in a certain CSS file, we should ideally only concern ourselves with other values in that same file.
you need to assign it using the style={} construct. Try this:
<Input ref="username" type="text" label="Username" placeholder="Enter username" style={{zIndex:1}} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
