Issues With ZIndex using reactjs and a fixed navbar - css

Question

I have read through many posts/information about Z index and still have not been able to figure this out, I have a website with the navbar position fixed so it stays on the top of the page on scroll, when I get down below my header (component where the navbar is placed), all the elements appear ABOVE the navbar when scrolled over (which is obviously not desired), I am able to put a zIndex of -1 on those elements to fix this, however currently I have a form, and making its zIndex -1 makes all the form inputs and submit button disabled or unclickable (guessing it puts the form below another div/element), so I'm pretty stuck and appreciate any advice .. :)
Navbar.js
import React, { Component } from "react";
import Radium from "radium";
class NavBar extends Component {
state = {
topOfPage: true,
headerSection: true
};
componentDidMount() {
window.addEventListener("scroll", this.navBarState);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.navBarState);
}
navBarState = () => {
if (window.scrollY < 58) {
this.setState({
topOfPage: true
});
}
if (window.scrollY > 58 && window.scrollY < 740) {
this.setState({
topOfPage: false,
headerSection: true
});
}
if (window.scrollY > 740) {
this.setState({
headerSection: false
});
}
};
render() {
const { topOfPage, headerSection } = this.state;
let navStyle;
let linkStyle;
if (topOfPage && headerSection) {
navStyle = {
base: {
background: "transparent",
transition: "background-color 0.7s ease"
}
};
linkStyle = {
base: {
transition: "font-size 0.8s",
":hover": {
color: "black",
fontSize: "25px",
fontWeight: "bold",
background: "white",
textTransform: "uppercase",
paddingTop: "10px",
borderRadius: "50px"
}
}
};
} else if (!topOfPage && headerSection) {
navStyle = {
base: {
background: "rgba(20, 20, 20, 0.87)",
boxShadow: "0 8px 6px -6px",
transition: "background-color 0.7s ease"
}
};
linkStyle = {
base: {
transition: "font-size 0.5s",
":hover": {
color: "white",
fontSize: "25px",
fontWeight: "bold"
}
}
};
} else {
navStyle = {
base: {
background: "rgba(20, 20, 20, 0.99)",
boxShadow: "0 8px 6px -6px"
}
};
linkStyle = {
base: {
transition: "font-size 0.5s",
":hover": {
color: "white",
fontSize: "25px",
fontWeight: "bold"
}
}
};
}
return (
<nav style={[navStyle.base]}>
<ul className="navbarWrapper">
<li>
<a href="#!" style={[linkStyle.base]} key="1">
Home
</a>
</li>
<li>
<a href="#!" style={[linkStyle.base]} key="2">
Beat Store
</a>
</li>
<li>
<a href="#!" style={[linkStyle.base]} key="3">
Licensing
</a>
</li>
<li>
<a href="#!" style={[linkStyle.base]} key="4">
Drum Kits
</a>
</li>
<li>
<a href="#!" style={[linkStyle.base]} key="5">
Contact Us
</a>
</li>
</ul>
</nav>
);
}
}
export default Radium(NavBar);
Form.js
import React from "react";
import { Form, Button, Grid, Segment, Input } from "semantic-ui-react";
const FreeBeatForm = () => {
return (
<Grid
container
style={{
marginTop: "50px",
display: "flex",
justifyContent: "center",
}}
>
<Grid.Column width={5} style={{zIndex: '-1'}}>
<Segment>
<h1>Subscribe</h1>
<Form>
<Form.Field>
<label>Name</label>
<Input placeholder="Name" />
</Form.Field>
<Form.Field>
<label>Email</label>
<Input placeholder="Email" />
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
</Segment>
</Grid.Column>
</Grid>
);
};
export default FreeBeatForm;

Answer 1

Try to leave out the z-index for your components in the page, instead make sure your NavBar as position:fixed and it has a higher z-index, for example you could use 1000.

Answer 2

I'm guessing it has something to do with the semantic ui components, because changing my semantic Inputs to bootstrap inputs fixed the issue..