如何将相对元素定位在另一个相对元素之上？

Question

我知道我说的可能不太可能。这是我想要的结果：link to picture

header 容器应包含视频且高度不应超过视频高度，因为其他内容需要出现在同一流中。 h1 和 p 应该位于 header 的中间。 h1 和 p 元素也必须是相对的，因为它们需要彼此相对。

我试过在相对定位的文本中添加另一个 z-index，但似乎无法正常工作。我很乐意得到任何帮助！ :)

Html:

<header>
    <video class="header-video" autoplay muted loop>
        <source src="Images and videos/video.mp4" type="video/mp4">

    <!--If video can't be played display text-->
    Sorry! Your browser can't display this video. 
</video>
<h1>Say my name</h1>
<div class="thin-line"></div>
<p>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</p>

Css:

/* 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;
}

Answer 1

我正在使用外部 div CSS 样式相对位置。并使内在的绝对。对于居中的内部元素使用 CSS 样式 "position:absolute;top:50%;left:50%;transform:translate3D(-50%, -50%, 0);".

对于全高屏幕，使用 CSS 样式 "Height: 100vh;"。这意味着全屏的视口高度 Div.

https://jsfiddle.net/sadika/x624o8cn/3/

CSS:

<style>

body{
margin:0px;
padding:0px;
}

.hero-bg{
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.hero-bg{
  background-image: url(http://lorempixel.com/1600/400/nature/); 
}
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}

</style>

HTML:

<body>
    <div class="hero-bg">
      <div class="hero"> 
            <h1 style="font-size:36px;margin: 15px;">Say my Name</h1> 
            <hr />
            <p style="font-size:18px;ma">
            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
            </p> 
      </div>
    </div>
<body>

如何将相对元素定位在另一个相对元素之上？

How to position relative element on top of another relative element?

html

css

css-position