Question

好的，所以我正在创建一个投资组合网站（我是一个相对较新的网络学生），我正在使用Bootstrap元素作为我的导航栏。这可能与我的问题无关，但我的视频背景是我的目标网页，而我的网站是滚动网站。我现在遇到的问题是我的“关于”页面位于我的视频背景登录页面下，我无法通过我的视频div将我的页面调整为移动设备，并将我的关于div放在一起，或者只是粘在一起。我尝试使用媒体查询但由于某种原因他们没有工作，我不知道这是因为bootstrap是不允许它还是我只是在做我的媒体查询是错误的？如果你能看看我的代码并帮助我永远爱你，感谢你的任何帮助。

也很抱歉，如果我的代码过多，这是我第一次使用Stackoverflow，所以我是一个n00b，我道歉。

enter code here <div class="hidden-phone">
                 <div class="header-unit">
                   <div id="video-container">
                    <video autoplay loop class="fillWidth" muted>
                      <source src="videos/homeVid.mp4" type="video/mp4" />
                      <source src="videos/homeVid.mov" type="video/mov" />
                      <source src="videos/homeVid.webm" type="video/webm" /> Your browser does not support the video tag. I suggest you upgrade your browser.
                    </video>
                   </div>
                  <!-- end video-container -->
                    <img class="gif" src="images/CreateEveryDay.gif" />
                </div>
               <!-- end .header-unit -->
               </div>
               <!--end of header container-->
               <div id="belowVideo">
                 <div id="section">
                  <p> About </p>
                 </div>
                <div class="jumbotron">
                  <img src="images/PhillyBackgrounds.jpg" class="philly"/>
                  <img src="images/TylerPic.png" class="tylerPic"/>

                   <p class="bioHeader" style="font-size: 1.1em;">(Little bit about me)</p>
                   <p class="bio" class="hidden-phone" style="font-size: .9em;"> 
                My name is Tyler Reardon and I'm a UI/UX Designer with a mixed bag of skills from Philadelphia, PA. My daily goal is to cram as much great design into this world as I can, and enjoy every day that I do it. Im passionate about people and the human experience, and I try and convey that through my work. 
                    <br>
                    <br>
                    Thanks for checking me out. 
                    <br>
                    <br>
                    <br>
                    </p>
                  <div id="resumeCircle">
                   <a href="images/resume.pdf" target="_blank"><img class="resume" src="images/curriculum.png"/></a>
                    <br>
                   <p style="top: 130px; left: 25px"> Resume</p>

                  </div>

                </div>

               <div class="portfolioContainer">
              <div id="portfolio">
                <h1> Portfolio</h1> 
              </div>
              </div>
              </div>

------------------ STYLE SHEET --------------------------- -

               header-unit {
                 height: 800px;
                 border-right:none;
                 border-left: none;
                 position: relative;
                 top: :0;
                 overflow: auto;
                 }

               #video-container {
                 }

              #video-container {
                top:0px;
                left:0%;
                height:100%%;
                 width:100%;
                overflow: auto;
                 }

              video {
                z-index:-1;
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
                 }

              video.fillWidth {
                width: 100%;
                 }


              #belowVideo {
                top:0%;
                position: absolute;
                 }

              .jumbotron {
                 margin-top: 5%;  
                 }

             .philly {
                 width: 100%;
                 left: 0%;
                 position: absolute;
                 margin-top: 0%;
                 }

             .tylerPic {
                 max-width: 45%;
                 min-width: 30%;
                 left: 22%;
                 position: absolute;
                 margin-top: 13%;
                 }


             .bioHeader {
                position: absolute;
                text-align: center;
                margin-top: 10%;
                left: 34%;
                letter-spacing: 9px;
                background-color: #000;
                opacity: .5;
                color: #fff;
                padding: 20px;
                font-family: 'Ubuntu', sans-serif;
                font-weight: 300;
                }

              .bio {
                text-align: center;
                position: absolute;
                margin-top: 35%;
                left: 11%;
                right: 15%;
                font-size: 50px;
                font-family: 'Ubuntu', sans-serif;  
                letter-spacing: 5px;
                font-weight: 300;
                padding: 40px;
                }

              #resumeCircle{
                position: absolute;
                left: 43%;
                background-color: #ff6600;
                border-radius: 50%;
                width: 130px;
                height: 130px;
                margin-top: 700px;
                opacity: .8;
                }

               .resume{
                position: absolute;
                width: 60px;
                height: auto;
                left: 35px;
                top: 20px;
                font-family: 'Ubuntu', sans-serif;  
                filter: #000;
                -webkit-filter: white;
                }


              .portfolioContainer {
                position: absolute;
                width: 100%;
                margin-top: 70em;
                }

              #portfolio {
                width: 100%;
                height: 100%;
                position: absolute;
                padding: 10px;
                }

Answer 1

在你的CSS中，你有

#belowVideo {
  top: 0%;
  position: absolute;
}

告诉浏览器将该元素放在相对定位的下一个父元素的顶部，无论其他地方是什么。

如果删除该块，该元素可以按照HTML定义的方式自由下移。

我的视频div和其他div重叠

1 个答案: