如何修復浮動在另一個div後面的div？（CSS包含在下面）

-1

我創建了一個非常小巧的網站，下面的CSS規則（從來沒有空的規則），但不知怎麼的頭似乎得到了codrops頂級導航欄後面。這限制了我如何定位標題和其他內容。幫我修復它（！請）如何修復浮動在另一個div後面的div？（CSS包含在下面）

html, body { 

    } 



    #page-container { 

    } 

    #content { 

    } 

    .codrops-top { 
     line-height: 24px; 
     font-size: 16px; 
     background: #262525; 
     background: rgba(0,0,0,0.5); 
     text-transform: uppercase; 

     position: absolute; 
     width: 100%; 
     top: 0; 
     left: 0; 
     font-family: 'Open Sans', sans-serif; 
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 


    } 
    .codrops-top a { 
     padding: 0px 20px; 
     letter-spacing: 1px; 
     color: #f3f0f0; 
     display: inline-block; 
     text-decoration: none; 
    } 
    .codrops-top a:hover { 
     background: rgba(255,255,255,0.4); 
    } 
    .codrops-top span.right{ 

    } 
    .codrops-top span.right a{ 

     display: block; 
    } 

    .selected{ 
     background: rgba(255,255,255,0.4); 
    } 

    .transparent-style{ 
     background-color: #ffffff; 
     opacity: .4; 
    } 

    .hidden { 
     display: none; 
    }

下面是HTML代碼，它是一個真正的混亂，但是這是我記得的基本HTML：

<html> 
    <head> 
     <title>28CUP2015 OPEN RECRUITMENT</title> 
    </head> 

    <link href="css/design.css" rel="stylesheet"/> 
    <link href="css/bootstrap/css/bootstrap.css" rel="stylesheet"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <meta name="keywords" content="28cup, 28 cup, 28 cup 2015, mpkosis28, mpk osis 28, mpkosis, mpk osis" /> 

<body> 
    <div id="page-container"> 
     <div class="codrops-top"> 
       <center> 
        <span> 
         <a href="index.php"> 
         <strong>HOME</strong> 
         </a> 
         <a href=about.php> 
         <strong>ABOUT</strong> 
         </a> 
         <a href="mailto:[email protected]"> 
         <strong>CONTACT VIA E-MAIL</strong> 
         </a> 
         <a href="http://goo.gl/forms/oXBZKgpFzk"> 
         <strong>INPUT ASPIRASI 28 CUP</strong> 
         </a> 
        </span> 
       </center> 
      <div class="clr"></div> 
     </div><!--/ Codrops top bar --> 
     <div class="header"> 
      <h3>LOLOLOLOLOLOLOLOLOLOLOLOLOLOL</h3> 
     </div> 
     <div class="content"> 
      <p>sdfwsdvchwdhcirhgtierguheriucyergchiwergciergfaefhoajrceac,asirf,weirc,isdfhoxweht,cowheoithciweticheish,icweiltc</p> 
     </div> 
    </div> 
</body> 
</html>

這是一個很長的時間，因爲我建一個網頁從頭開始，抱歉，如果所有這些讓你感到困惑。

來源

2014-10-28 hiu28

你能刪除所有不相關的代碼 – Nick 2014-10-28 13:33:53

@尼克我會問，當我問另一個問題，謝謝 – hiu28 2014-11-02 08:03:29

您可以使用CSS中的相對位置將div放在另一個下面。例如;

#div1 { 
    position: relative; 
} 

#div2 { 
    position: absolute; 
    bottom: 0px; 
}

來源

2014-10-28 13:30:08

當您在元素上使用絕對定位時，將從文檔流中移除該元素。換句話說，它周圍的元素的行爲是，如果它不存在（在大多數情況下）。這就是爲什麼一切都在你的頭上運行。這裏是註釋掉絕對定位佈局的codepen：

http://codepen.io/erquhart/pen/iegqd

obligatory code: 
/* position: absolute */

爲了更好地理解絕對定位（和一般的定位），檢查MDN的文檔： https://developer.mozilla.org/en-US/docs/Web/CSS/position

來源

2014-10-28 13:39:13

如何修復浮動在另一個div後面的div？ （CSS包含在下面）

回答

相關問題

如何修復浮動在另一個div後面的div？（CSS包含在下面）