How to position relative element on top of another relative element?
<p>I know this might not be possible the way I said it. This is the result I'm aiming for: <a href="http://i.stack.imgur.com/wKiNy.jpg" rel="nofollow">link to picture</a></p>

<p>The header container should be containing the video and the height should not exceed the video height since other stuff need to appear in the same flow. The h1 and p should be positioned in the middle of the header. The h1 and p element must too be relative since they need to be relative to each other.</p>

<p>I've tried adding another z-index to the text with relative positioning, but can't seem to make it work. I'd love any help I can get! :)</p>

<p>Html:</p>

<pre><code>&lt;header&gt;
    &lt;video class="header-video" autoplay muted loop&gt;
        &lt;source src="Images and videos/video.mp4" type="video/mp4"&gt;

    &lt;!--If video can't be played display text--&gt;
    Sorry! Your browser can't display this video. 
&lt;/video&gt;
&lt;h1&gt;Say my name&lt;/h1&gt;
&lt;div class="thin-line"&gt;&lt;/div&gt;
&lt;p&gt;I need a sign or a signal. I've overthought everything I can think of into symbol I need the coat and your jacket And the remnants of your cigarette packet&lt;/p&gt;
</code></pre>

<p></p>

<p>Css:</p>

<pre><code>/* Images and videos
--------------------------------------------------------------------------------*/

.header-video {
    width: 100%;
    top: 0;
    z-index: -1;
    position: absolute;
    display: block;
    overflow: hidden;
}


/* Header
--------------------------------------------------------------------------------*/

header {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding-top: 10vh;
}

header h1 {
    color: white;
    position: relative;
    z-index: 1;
    display: block;
    font-weight: normal;
    font-size: 7em;
    margin: 0 auto 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
}

header p {
    position: relative;
    margin-top: 22%;
    z-index: 1;
    display: block;
    width: 30vw;
    margin: 2vh auto 0 auto;
    left: 0;
    right: 0;
    color: white;
}

/* Lines
--------------------------------------------------------------------------------*/

.thin-line {
    display: block;
    height: 0.1em;
    width: 60vw;
    position: relative;
    z-index: 1;
    background: white;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
</code></pre>