元素移動到HTML/CSS容器的外部

我有一個循環視頻頭，我使用我找到的代碼片段實現。我覆蓋了文本和頂部的按鈕。它看起來沒問題，直到我到達某個中斷點，然後文本和按鈕才移出視頻容器。元素移動到HTML/CSS容器的外部

我試圖把我認爲視頻進入的div，但它只是從視圖中刪除文本和按鈕。

該網站爲kgshowroom.com/test，它是珊瑚色的「你好」按鈕和文字，上面寫着「KG Showroom You are on our site」。

這是我覺得我應該代碼進行調整：（？視頻容器）

<div class="header-video"> 
    <img src="img/masthead.jpg" 
     class="header-video--media" 
     data-video-src="0CxWLQxvY9g" 
     data-teaser-source="video/masthead-teaser" 
     data-provider="Youtube" 
     data-video-width="500" 
     data-video-height="281"> 
    <a href="http://vimeo.com/87701971"> 


    </div>

（文本和按鈕部分？）

<div id="header"> 
     <!-- Inner --> 
     <div class="inner" style="position: relative; z-index: 999; top: 0px; width: 50%; margin: 0 auto; text-align: center;"> 
      <header> 
      <h1> 
       <a href="index.html" id="logo"><img src="images/KG-logo.png"><br />KG Showroom</a></h1> 
      <p>You're on our site.</p> 
      </header> 

      <footer> 
      <a href="#banner" class="button circled scrolly">Hello!</a> 
      </footer> 

     </div>

我試着將「文本和按鈕部分」移動到「視頻容器」中關閉div標籤上方的位置，但它只是使文本和按鈕消失。

任何人都知道我在哪裏錯了嗎？我希望它保持覆蓋並集中在所有斷點上的視頻上，而不管屏幕的大小。

此外，循環視頻播放我的三星Note II，但它不會在我兄弟的三星Galaxy（5？）上播放。在測試時，它可以在我的桌面上一直播放不同的尺寸;是否有代碼中的某些東西讓它無法在我兄弟的手機上工作？

謝謝！

來源

2015-08-19 ginabegin

看起來像是CSS的問題，而不是HTML。文字和按鈕太大了。根據你的CSS處理大小的方式，我會盡量縮小頭部中的一些堆疊元素（標識，菜單，文本，按鈕），或重新安排移動版面。或者，如果您確定事物重疊，請使用絕對定位或負邊距。 – rojobuffalo

謝謝，@rblakeley！我對這一切都很陌生，所以我很難知道在哪裏/如何查明問題。另外，你知道爲什麼這個職位會被低估嗎？我做錯什麼了嗎？ – ginabegin

我不知道爲什麼它被低估。我已經給出了很小的非關鍵性錯誤的答案，這些錯誤在評論中得到了體現。我會解決這些錯誤，並且他們永遠不會收回倒票。 [Haterz gon討厭]（http://gifs.joelglovier.com/haters-gonna-hate/haters-gonna-hate-futurama.gif） – rojobuffalo

看起來script.js中的HeaderVideo函數正在動態調整header-video類的大小，它解釋了您的尺寸問題。您可能想重新修改該功能中的邏輯或使用media queries。

來源

2015-08-19 18:55:01 gffbss

謝謝，@gffbss - 我會研究一下。我對JavaScript並沒有真正的熟悉（自從我上過這門課之後就已經很久了），所以我會對它進行研究。 – ginabegin

元素移動到HTML/CSS容器的外部

回答

相關問題