HTML中脫離文檔流的元素有：

1. position: absolute?- 元素相對于最近的已定位（非 static）祖先元素定位。

2. position: fixed?- 元素相對于瀏覽器窗口定位。

3. float: left?或?float: right?- 元素向左或向右浮動，周圍的內容會環繞它。

沒有脫離文檔流的元素是：

1. position: static?- 默認定位方式，不脫離文檔流。

2. position: relative?- 元素相對于正常位置定位，但不脫離文檔流。

? ? static(靜態)?沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級，這是默認值。
??? relative(相對定位)?對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。
????absolute(絕對定位)?脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
??? fixed（固定定位）?這里所固定的參照對像是可視窗口而并非是body或是父級元素，其總是固定在瀏覽器窗口的某個位置，并且不受滾動的影響，是絕對的坐標定位。可通過z-index進行層次分級。

絕對位置

style="position: absolute;left: 218px;top: 0%;"

style="position: absolute;bottom:5px;right:5px ;"

?float?

<a href="/home/">
<button  style="float:right;background-color:#353c48;color:white">主頁</button>
</a>

相對位置 :margin外邊距? padding內邊距

style="border:1px solid black;width:200px;text-align:left;margin-left:1200px;padding-left:10px"

?修改width:500px,height 同

?修改text-align: right

修改margin-left :200px

margin-left:-webkit-calc(50% - 100px)  注意減號左右的空格

修改padding-left :200px