CSS相對定位，讓所有的孩子都相對於父母

Question

請考慮下面的HTML與造型。

<div style="border: 1px solid;height: 600px;"> 
    <button id="create_new_estimate" style="position:relative;top:10px;left:10px;"> 
     Create New Estimate 
    </button> 

    <table style="position:relative;top:10px;left:300px;"> 
     <tr> 
      <td> 
       cell 1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       cell 2 
      </td> 
     </tr> 
    </table> 
</div> 

你可以看到它here。

我想能夠並排放置這兩個元素。最終我會在這個div中添加更多元素。我認爲position:relative會允許我給每個元素賦予一個top和left樣式屬性，以給它一個相對於父div的位置。然而，正如你在這個例子中看到的，這兩個元素都有top:10px;，所以我期望它們彼此相鄰，但它們並不相鄰。

你知道我可以使用什麼樣式，所以我可以簡單地給每個元素一個top和left屬性來將它們放在父元素中。謝謝！

Answer 1

給你outter包裝div「位置：相對;」並改變你目前的「職位：親戚」;到「位置：絕對;」

在「position：absolute」旁邊使用「top」和「left」屬性，並將「position：relative」作爲您的錨點。它沒有「position：relative」的父元素，那麼瀏覽器窗口就成爲你的錨點。