Question

我知道这可能不是我说的那样。这是我的目标：link to picture

标题容器应包含视频，高度不应超过视频高度，因为其他内容需要出现在同一个流中。 h1和p应位于标题的中间。 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样式位置相对。并使内在绝对。对于center，内部元素使用CSS样式＆＃34; position：absolute; top：50％; left：50％; transform：translate3D（-50％， - 50％，0）;＆＃34;。

对于全高屏幕，使用CSS样式＆＃34;高度：100vh;＆＃34;。这意味着全屏幕的视口高度

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>

如何将相对元素放在另一个相对元素的顶部？

1 个答案: