如何將相對元素定位在另一個相關元素的頂部？

我知道這可能不可能像我說的那樣。這是我瞄準的結果：link to picture 如何將相對元素定位在另一個相關元素的頂部？

標題容器應該包含視頻，高度不應該超過視頻高度，因爲其他東西需要出現在同一個流中。 h1和p應該位於標題的中間。 h1和p元素也必須是相對的，因爲它們需要彼此相對。

我已經嘗試添加另一個Z-索引的文本與相對定位，但似乎無法使其工作。我很樂意獲得任何幫助！ :)

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

來源

2016-01-28 Emric Månsson

檢查本網站https://www.airbnb.com/我認爲這是對你非常有幫助。您可以檢查檢查元素中的代碼。 –

爲什麼p和h1需要相對？只需把它們放在一個div中，絕對位置在頂部：50％，剩下50％用translate（-50％，-50％）來居中。 – Rudi

@DanishKhan這就是我想要實現的。但我找不到我準確找到的東西。 :( –

我使用相對外DIV + CSS樣式的位置。讓內在的一個絕對。對於中心，內部元素使用CSS樣式「position：absolute; top：50％; left：50％; transform：translate3D（-50％，-50％，0）;」。

對於全高屏幕使用CSS樣式「高度：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>

來源

2016-01-29 09:55:59

我已經安定下來了與此類似的解決方案。謝謝你的回答！ –

如何將相對元素定位在另一個相關元素的頂部？

回答

相關問題