将 div 定位在页面上其他元素的下方

Question

我对 div 在我的页面上的定位有疑问。我想把它放在我的其他两个元素下面，但我以前尝试过的所有方法都没有用——尽管互联网似乎告诉我应该这样做。这是我的代码：

#headingmain {
 position: relative;
 top: 150px;
 font-family: Comic Sans MS;
 }
 #main {
 margin: 0 auto; 
 border-radius: 25px;
 background: #73AD21;
 padding: 20px;
 width: 200px;
 height: 150px;
  
 }
#para {
 position: relative;
 top: 150px;
 font-family: Comic Sans MS;
 }
 

 
#test {font-family: Comic Sans MS;}

<!DOCTYPE html>
<html>
 <head>
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
   <h1 align="center" id="headingmain">Title</h1>
   <p id="para" align="center">para</p>

   <div id="main" align="center">
   <p id="test">Test</p>
   </div>
  </body>
 </html>

我怎么也找不到在 Internet 上将 div 置于其他两个元素下方的教程。这是我最后的选择，我很感谢你们能提供的任何帮助。

再次感谢！

Answer 1

这是一个非常简单的fiddle，您要达到的定位是：http://jsfiddle.net/eh8ff325/3/

如您所见，下面有两个嵌套的 div (#one > #two) 和 #three div。

<main>
  <div id="one">One
    <div id="two">
      Test
    </div>
  </div>

  <div id="three">Three</div>
</main>

所有三个 div 都在一个容器内，该容器进行水平对齐和一些上边距。

将 div 定位在页面上其他元素的下方

Positioning a div beneath other element on the page

html

css

positioning