如何将相对元素放置在另一个相对元素之上？

Question

I know this might not be possible the way I said it. 我知道这可能不是我所说的那样。 This is the result I'm aiming for: link to picture 这是我想要的结果：链接到图片

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. h1和p应该位于标题的中间。 The h1 and p element must too be relative since they need to be relative to each other. h1和p元素也必须是相对的，因为它们必须彼此相对。

I've tried adding another z-index to the text with relative positioning, but can't seem to make it work. 我尝试过在相对位置的文本中添加另一个z-index，但似乎无法使其正常工作。 I'd love any help I can get! 我将竭尽所能！ :) :)

Html: 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: 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

I am using the outer div CSS style position relative. 我正在使用外部div CSS样式位置相对。 And make the inner one absolute. 并且使内在绝对。 For center the inner element use CSS style "position:absolute;top:50%;left:50%;transform:translate3D(-50%, -50%, 0);". 对于居中，内部元素使用CSS样式“ position：absolute; top：50％; left：50％; transform：translate3D（-50％，-50％，0）;”。

For full height screen use CSS style "Height: 100vh;". 对于全屏，请使用CSS样式“ Height：100vh;”。 That means Viewport Height for Full Screen Div. 这意味着全屏Div的视口高度。

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

CSS: 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: 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>

如何将相对元素放置在另一个相对元素之上？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-01-29 09:55:59

如何将相对元素放置在另一个相对元素之上？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-01-29 09:55:59

解决方案1
0 已采纳 2016-01-29 09:55:59