z-index not working for text over background video - css

Question

I found code online that I copied to get my website's title over a looped background video. However my efforts to add links on the left hand side of the screen are not working. Since I want each one stacked on top of the other I assumed that flexbox would be the best way to handle but I can't even get the links to show without it. What am I doing wrong, and what is the best way to achieve my goal?
body {
width: 100%;
margin: 0 auto 0;
}
.video_main {
margin: 0 auto 0;
width: 100%;
height: auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%px;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index: -1500;
}
.content h1 {
font-family: "jaf-domus-titling-web", sans-serif;
color: white;
text-align: center;
font-size: 48px;
letter-spacing: 4px;
z-index: 100;
position: absolute;
top: 75px;
}
.content h2 {
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 30px;
letter-spacing: 6px;
z-index: 100;
position: absolute;
top: 175px;
}
.content p {
display: block;
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 16px;
z-index: 100;
position: absolute;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>

Answer 1

The problem isn't the z-index, its that you are not positioning the links over the video in the first place.
You have made the position for the <p> elements absolute, but you haven't told it where to position them. You need to use top, bottom, left and/or right to place the elements.
Instead of doing this for each individual <p> element, its easier to add them all to a div and then just position that one div.
1: Group the links into a div for easier positioning, e.g.:
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
[etc...]
</div>
</div>
2: Remove the positioning from .content p, because we're going to use the div to place them
.content p {
[...]
position:absolute; /* <- REMOVE */
}
3: Create your CSS rules to position the div, e.g.
.content .videolinks{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
Working Snippet:
body {
width: 100%;
margin: 0 auto 0;
}
.video_main {
margin:0 auto 0;
width:100%;
height:auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%px;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index:-1500;
}
.content h1 {
font-family: "jaf-domus-titling-web",sans-serif;
color: white;
text-align: center;
font-size: 48px;
letter-spacing: 4px;
z-index:100;
position:absolute;
top:75px;
}
.content h2 {
font-family: "europa",sans-serif;
color: white;
text-align: center;
font-size: 30px;
letter-spacing: 6px;
z-index:100;
position:absolute;
top:175px;
}
.content p {
font-family: "europa",sans-serif;
color: white;
font-size: 16px;
}
.content .videolinks{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
</div>
Don't forget that you might need to adjust the placement of the video heading etc to make room for the links, especially on smaller screens.